vue自定义组件v-model

自定义组件ym-set-cols

Vue.component('ym-set-cols',{
    template: `
    <div v-for="item in tableCols">
        <el-checkbox v-model="item.isCheck" :label="item.name" @change="checkChange"></el-checkbox>
    </div>`,
     data() {
        return {
            tableCols: []
        }
     },
     model: { // 核心
        prop: 'cols', // 接收父组件传值属性
        event: 'complete' // 自定义一个事件，用于触发向父组件传值
     },
     props: {
        cols: Array
     },
     mounted() {
        // 讲props进行本地存储
        this.tableCols = this.cols.map(item=>item)
     },
     methods: {
        checkChange(item) {
            // 改变值，传给父组件
            let temp = this.tableCols.filter(item=>item.isCheck)
            this.$emit('complete',temp)
        }
     }
})

父组件调用

<ym-set-cols v-model="tableCols"></ym-set-cols>

v-model语法糖就相当于:cols="tableCols" @complete="changeCols"