关于vue.js:vue自定义组件vmodel

自定义组件 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"