web全栈

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

2019-08-14  本文已影响0人  Mjhu

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)
            }
        },
    }
上一篇 下一篇

猜你喜欢

热点阅读