VUE学习-组件通信

vue组件通信

1. 页面传值：$route/${prop}
2. 组件传值：
   • 父组件传值给子组件：参数传值
   • 子组件传值给父组件：给父组件传过来函数传参数；通过插槽的v-slot，绑定参数

组件通信一般分为以下几种情况：

• 父子组件通信
• 兄弟组件通信
• 跨多层级组件通信
• 任意组件

父子通信

父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件

父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据。

还可以通过访问 $parent 或者 $children 对象来访问组件实例中的方法和数据。

父传值给子组件

props传值

• 父组件

<template>
	<div>
		<children :info ="messgae"></children>
	</div>
</template>
<script>
import children from './children.vue'
export default {
	data(){
		return{
			messgae:'我是父组件'
		}
	},
	components:{
		children
	}
}
</script>
<style></style>

• 子组件

<template>
	<div>{{info}}</div>
</template>
<script>
export default {
	props:['info']
}
</script>
<style></style>

子组件给向父组件传递事件

$emit

• 父组件

<template>
	<div>
	{{ newData }}
		<children @event1="change($event)"></children>
	</div>
</template>
<script>
import children from './children'
export default {
	data() {
		return {
			newData: '这是父组件的数据'
		}
	},
	methods: {
		change(data) {
			this.newData = data;
		}
	},
	components: {
		children
	}
}
</script>
<style></style>

• 子组件

<template>
	<div>
		<h1>我是子组件</h1>
		<button @click="toParent">向父组件传值</button>
	</div>
</template>
<script>
export default {
	data() {
		return {
			data1: '子组件的数据'
		}
	},
	created(){
		console.log(222)
	},
	methods: {
		toParent:function() {
			this.$emit('event1', this.data1)
		}
	}
}
</script>
<style scoped></style>

兄弟组件通信

这种情况可以通过查找父组件中的子组件实现，也就是 this.\(parent.\)children，在 $children 中可以通过组件 name 查询到需要的组件实例，然后进行通信。

跨多层次组件通信

对于这种情况可以使用 Vue 2.2 新增的 API provide / inject，虽然文档中不推荐直接使用在业务中，但是如果用得好的话还是很有用的。

假设有父组件 A，然后有一个跨多层级的子组件 B

// 父组件 A
export default {
	provide: {data: 1}
}
// 子组件 B
export default {
	inject: ['data'],
	mounted() {
		// 无论跨几层都能获得父组件的 data 属性
		console.log(this.data) // => 1
	}
}

任意组件

这种方式可以通过 Vuex 或者 Event Bus 解决，另外如果你不怕麻烦的话，可以使用这种方式解决上述所有的通信情况