Vue自定义组件实现v-model双向绑定

原创已于 2023-06-30 10:46:36 修改 · 906 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-model #双向绑定 #自定义组件 #子组件

于 2020-08-21 20:02:44 首次发布

vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细解析了Vue.js中父子组件间的通信机制，通过实例展示了如何利用v-model实现父子组件的双向数据绑定。核心步骤包括：父组件绑定v-model值，子组件接收并同步该值，同时监听属性变化并通过$emit('input')反馈给父组件。

核心点：
1.父组件啥也不用干只需要绑定v-model值
2.子组件接收绑定的props属性必须为value
3.子组件data中必须定义一个属性接收value的值
4.子组件watch监听value的值同步给定义的属性
5.子组件watch监听定义属性的值通过$emit('input')同步给父组件

父组件

<template>
	<div>
		<p>父组件当前的值：{{num}}</p>
	    <button @click="btnClick">减少</button> 
	    <child v-modal="num" />
	</div>
</template>

<script>
import Child from './child.vue';
export default {
	name: 'parent',
	components: {
		Child 
	},
    data() {
        return { num: 0 };
    },
    methods: {
        btnClick() {
            this.num--;
        },
    },
};
</script>

子组件

<template>
	<div>
		<p>子组件当前的值：{{num}}</p>
    	<button @click="btnClick">增加</button> 
    </div>
</template>

<script>
export default {
	name: 'child',
    props: {
        value: Number,
    },
    data() {
        return { num: 0 };
    },
    watch: {
        value: {
	      handler(val) {
	        this.num = val;
	      },
	      immediate: true,
	    },
        num(num) {
            this.$emit('input', num);
        },
    },
    methods: {
        btnClick() {
            this.num++;
        },
    },
};
</script>