vue父子组件双向绑定值的语法糖 .sync

最新推荐文章于 2024-05-26 22:57:35 发布

要叫我大哥

最新推荐文章于 2024-05-26 22:57:35 发布

阅读量198

点赞数

分类专栏： javascript vue

本文链接：https://blog.csdn.net/weixin_42845571/article/details/118099767

版权

Vue.js 父子组件通信 sync修饰符事件属性绑定

关键词由CSDN通过智能技术生成

javascript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

有两种情况，有的时候一种是可以的，有的时候用另一种也是可以的，但是我也没区分具体用哪一种，不止是子组件是输入框和其他dom操作的区别。
this. $e m i t (^{'} i n p u t^{'}, e v e n t . t a r g e t . v a l u e); t h i s .$ emit(‘update:value’,[1,2,3,4,5]);

第一种：
父组件：

<count-control :value.sync="courseCount"></count-control>

子组件

<template>
	<div class="count_control">
		<input :value="value" @input="input" type="number">
	</div>
</template>
 
<script>
export default {
	props: {
		value: {
			default: ""
		}
	},
	methods:{
		input(event){  
			this.$emit('input',event.target.value);
		}
	}
}
</script>

第二种：
父组件：

<count-control :value.sync="chooseSrcList"></count-control>

子组件

<template>
	<div class="count_control">
		<button :value="value" @click="btnFn" ></button>
	</div>
</template>
 
<script>
export default {
	props: {
		value: {
			default: ""
		}
	},
	methods:{
		btnFn(){  
			this.$emit('update:value',[1,2,3,4,5]);
		}
	}
}
</script>