8-2.vue组件之间的通信

Vue组件之间的通信

vue组件之间的通信分为几种情况：
1.父组件向子组件传递数据
2.子组件向父组件发送数据
3.非父子关系组件的数据传递

父组件向子组件传递数据

父组件向子组件传递数据时，利用到的是props属性。子组件中在props定义好要接受的数据，父组件中使用v-bind传递子组件在props中定义好的数据。
1.首先创建子组件Child，在src/components/目录下新建Child.vue文件。在Child.vue文件中定义props，创建一个messages的属性。

<template>
	<div class="box">
		<h3>我是子组件Child组件---父组件传递的值是:{{messages}}</h3>
	</div>
</template>
<script>
	export default {
		props: ['messages'],
	}
</script>
<style>
	.box{
		width: 100%;
		height: 300px;
		border: 2px solid red;
	}
</style>

2.新建父组件Father,在src/components/目录下新建Father.vue文件。在Father.vue文件中引入子组件Child

• 当父组件给子组件传递的数据是固定值或是静态的数据时就不用v-bind指令进行绑定了，字符串是静态的可直接传入无需在属性前加v-bind。数字，布尔，对象，数组，这些是js表达式，所以需要利用v-bind指令进行绑定，可以放在data数据中进行引用。

<template>
	<div>
	    <h3>我是父组件Parent---12315</h3>
		<Child messages="HelloWorld">我是子组件Child</Child >
	</div>
</template>
<script>
	import Child from '../components/Children'
	export default{
		components:{
			Child 
		}
	}
</script>

• 当父组件给子组件传递的数据式动态的或是在构造器内部的data数据，则需要用v-bind进行数据绑定。

<template>
	<div>
	    <h3>我是父组件Parent---12315</h3>
		<Child :messages="parentMessages">我是子组件Child</Child >
	</div>
</template>
<script>
	import Child from '../components/Children'
	export default{
		data(){
			return{
				parentMessages:"12315"
			}
		},
		components:{
			Child 
		}
	}
</script>

运行结果图：

子组件向父组件传递数据

在vue中子组件向父组件传递数据一般用$emit自定义事件，在父组件中监听这个事件并在回调中写相关逻辑。

 $emit(‘自定义事件名’，传递的数据)

1.首先创建子组件Child，在src/components/目录下新建Child.vue文件。在子组件中创建一个按钮，给按钮绑定一个点击事件。

<template>
	<div class="box">
		<h3>我是子组件Child---父组件传递的值是:{{messages}}</h3>
	    <p><button v-on:click="sendToFather">向父组件传值</button></p>
	</div>
</template>
<script>
	export default {
		props: ['messages'],
		methods:{
			sendToFather:function(){
				this.$emit('listenToChildEvent','152')
			}
		}
	}
</script>

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。自定义事件：listenToChildEvent，传递的值是：152
2.在父组件Father中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。

<template>
	<div>
	    <h3>我是父组件Parent---12315</h3>
		<p>子组件向父组件传递的值是:{{fromChildMessages}}</p>
		<Child :messages="parentMessages" v-on:listenToChildEvent="showFormChild">我是子组件Child</Child>
	</div>
</template>

v-on绑定的是在子组件的自定义事件，showFormChild方法是将传递的值打印在控制台上。

methods:{
	showFormChild:function(data){
		console.log("父组件传递给子组件的数据是:"+data)
		this.fromChildMessages=data
	}
}

运行结果图：

附加：Father.vue文件的完整代码：

<template>
	<div>
	    <h3>我是父组件Parent---12315</h3>
		<p>子组件向父组件传递的值是:{{fromChildMessages}}</p>
		<Child :messages="parentMessages" v-on:listenToChildEvent="showFormChild">我是子组件Child</Child>
	</div>
</template>
<script>
	import Child from '../components/Children'
	export default{
		data(){
			return{
				parentMessages:"12315",
				fromChildMessages:''
			}
		},
		components:{
			Child 
		},
		methods:{
			showFormChild:function(data){
				console.log("父组件传递给子组件的数据是:"+data)
				this.fromChildMessages=data
			}
		}
	}
</script>
<style>
</style>