【vue】非父子组件通信和插槽使用

一.非父子组件之间通信

在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。

这里我们主要讲两种方式：

• Provide/Inject
• Mitt全局事件总线；

1.1. Provide/Inject

Provide/Inject用于非父子组件之间共享数据：

• 比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；
• 在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，就会非常的麻烦；

对于这种情况下，我们可以使用 Provide 和 Inject ：

• 无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者；
• 父组件有一个 provide 选项来提供数据；
• 子组件有一个 inject 选项来开始使用这些数据；

实际上，你可以将依赖注入看作是“long range props”，除了：

• 父组件不需要知道哪些子组件使用它 provide 的 property
• 子组件不需要知道 inject 的 property 来自哪里

1.1.1. 基本使用

我们开发一个这样的结构：

App.vue组件提供数据：

<template>
	<div>
		<home></home>
	</div>
</template>
<script>
	import Home from './Home.vue';
	export default {
		components: {
			Home
		},
		provide: {
			name: "why",
			age: 18
		}
	}
</script>

Home.vue是中间的组件：

<template>
	<div>
		<home-content></home-content>
	</div>
</template>
<script>
	import HomeContent from './HomeContent.vue';
	export default {
		components: {
			HomeContent
		}
	}
</script>

HomeContent.vue是获取数据的组件：

<template>
	<div>
		<h2>HomeContent</h2>
		<h2>{
  {name}}-{
  {age}}</h2>
	</div>
</template>
<script>
	export default {
		inject: ["name", "age"]
	}
</script>

1.1.2. 函数写法

如果Provide中提供的一些数据是来自data，那么我们可能会想要通过this来获取：

这个时候会报错：

这里this使用的是哪里的this？

如何解决这个问题呢？

• 我们需要将provide转成为返回对象的函数；

1.1.3. 处理响应式

我们先来验证一个结果：如果我们修改了this.names的内容，那么使用length的子组件会不会是响应式的？

<template>
	<div>
		<home></home> <button @click="addName">添加name</button>
	</div>
</template>
<script>
	import Home from './Home.vue';
	export default {
		components: {
			Home
		},
		data(