vue自定义组件v-model

自定义组件ym-set-cols

Vue.component('ym-set-cols',{
    template: `
    
`, 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) } } })

父组件调用

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

你可能感兴趣的:(vue.js)