Vue 父子组件的双向数据传递

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js中如何使用v-model实现双向数据绑定，通过实例展示了自定义组件与父组件之间的数据同步和通信机制，包括@input事件、.sync修饰符的使用。

html
<div id="father">
			<p @click="change">{{bar}}</p>
			<child-comp  :message.sync="bar"  >
				
			</child-cmp>
			
		</div>

js
Vue.component("childComp",{
		props:['message'],
		template:'<input @input="$emit(\'update:message\',$event.target.value);" v-bind:value="message"> '
	})
	new Vue({
		el:'#father',
		data:{
			count:0,
			bar:'hhhhhhh'
		}

	})

**利用v-model 来双向绑定 **

html
		<div id="father">
			<p>{{loveVue}}</p>
				<base-checkbox v-model ="loveVue"></base-checkbox>
		</div>

js
Vue.component("base-checkbox",{
		model:{
			prop:'checked',
			event:'changeS'
		},
		props:{
			checked:Boolean
		},
		template:'<input type="checkbox" v-bind:checked="checked" v-on:change="$emit(\'changeS\',$event.target.checked)">'
	})
	new Vue({
		el:'#father',
		data:{
			loveVue:true,
		}
	})

.sync

html
<div id="father">
			<p >{{name}}</p>
			<show-name :value.sync="name">
				<show-name v-bind:value="name" v-on:update:value="update">
			</show-name>
		</div>


js
Vue.component("show-name",{
		props:{
			name:String
		},
		template:'<input type="text"   v-on:input="$emit(\'update:value\',$event.target.value)" >'
	})
	new Vue({
		el:'#father',
		data:{
			name:"gaojl"
		},
		methods:{
			update:function(e){
			this.name = e;
		}
		}
		

	})