VUE 中自定义控件双向绑定

父级组件index,子组件dc

绑定值为String

父组件code

<div>
<dc v-for="(item,index) in testList" v-model="item.test" :key="index"></dc>
</div>

export default {
    components: {plotImport},
    data(){
		testList: [{id: 1,test: '1'}, {id: 2,test: '4',}],
	}
}

子组件code

<div>
   <el-input v-model="value1"></el-input>
</div>

export default {
    props: {
        value: {
            type: String,
        },
    },
    data() {
        return {
            value1: this.value,
        };
    },
    watch: {
        value1: {
            handler(newValue) {
                this.$emit('input', newValue);
            },
        },
    },
}

这样就可以实现父级与子集的双向绑定

绑定值为对象（其实和字符串大同小异）

父级code

<div>
<dc v-for="(item,index) in testList" v-model="testList[index]" :key="index"></dc>
</div>

export default {
    components: {plotImport},
    data(){
	testList: [{
                 	id: 1,
                	test: '1',
                	test1: '2',
                	test2: '3',
            		}, {
                	id: 2,
                	test: '4',
                	test1: '5',
                	test2: '6',
            		},
            ],
}
}

子级code

        <div>
             <el-input v-model="value1.test"></el-input>
             <el-input v-model="value1.test1"></el-input>
             <el-input v-model="value1.test2"></el-input>
        </div>

export default {
    props: {
        value: {
            type: Object,
        },
    },
    data() {
        return {
            value1: this.value,
        };
    },
    watch: {
        value1: {
            handler(newValue) {
                this.$emit('input', newValue);
            },
        },
    },
}