Vue父子组件之间的通信

Vue父子组件之间的通信

创建两个全局组件
1.Parent 2. Child

父组件往子组件通信

1. 现在父组件中绑定自定义属性
2. 在子组件中使用props接收父组件传递的数据
3. 在子组件中可以任意使用

Vue.component('Child',{
	template:`<div>
					<p>我是子组件</p>
					<input type="text" v-model="childValue">
					<p>{{childValue}}</p>
				</div>`
	//子组件通过props接受父组件传递过来的数据
	props:['childValue']
});

Vue.component('Parent',{
	data(){
		return {
			msg:"你好"
		}
	},
	template:`<div>
		//自定义属性将父组件的数据传递给子组件
					<Child :childValue="msg"></Child>
				</div>`
});

子组件往父组件通信

1. 在父组件中绑定自定义事件
2. 在子组件中触发原生事件，在函数中用$emit触发

Vue.component('Child',{
	data(){
		return {
			msg:"你好"
		}
	},
	template:`<div>
				<p>我是子组件</p>
				<input type="text" v-model="msg" @input="clickValue(msg)">
			</div>`,
	methods:{
		//在函数中，自定义事件一定要通过this.$emit()触发，
		//$emit(自定义事件名，消息)
		clickValue(val){
			this.$emit('clickValue',val);
		}
	},
});

Vue.component('Parent',{
	template:`<div>
					<Child @clickValue="clickValue"></Child>
				</div>`,
		methods:{
			clickValue(val){
				console.log(val);
			}
	}
})