美文网首页web全栈
vue自定义组件上的v-model如何与子组件数据绑定

vue自定义组件上的v-model如何与子组件数据绑定

作者: 亿汇学_江湖老师 | 来源:发表于2019-08-14 19:02 被阅读0次

    v-model父组件写法:

    <ani @getValue="consoleValue" v-model="show"></ani>
    <ani v-model="show">
      <h3 slot="h2">我是插槽</h3>
    </ani>
    

    v-model子组件写法

    export default {
            name: "ww",
            props: {
                show: {
                    type: Boolean,
                }
            },
          //prop代表着要和props的那个变量相对应
          //event表示着事件,触发事件getValue的时候会改变父组件v-model的值。
            model:{
              prop: 'show',
              event: 'getValue'
            },
            components:{
                CellGroup, Cell
            },
            methods: {
                getShow() {
                    // eslint-disable-next-line no-console
                    console.log(this.show);
                },
                tellValue(){
                    this.$emit('getValue', 1,2,3,4)
                }
            },
        }
    

    相关文章

      网友评论

        本文标题:vue自定义组件上的v-model如何与子组件数据绑定

        本文链接:https://www.haomeiwen.com/subject/wxbnjctx.html