Vue组件之间的数据共享及ref

1.父组件向子组件共享数据:自定义属性

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

2.子组件向父组件共享数据:自定义事件

子组件向父组件共享数据使用自定义事件。示例代码如下：

3.兄弟组件之间的数据共享:EventBus

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

4.父组件调用子组件的方法：ref

4.1 什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
4.2 使用 ref 引用 DOM 元素

4.3 使用 ref 引用组件实例

5.后代关系组件之间的数据共享 ： provide 和 inject

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
5.1 父节点的组件可以通过 provide 方法，对其子孙组件共享数据：

export default {
  data() {
  	rerturn{
  		color:'red' // 1.向子孙组件共享的数据
  	}
  }，
  provide() {  // 2.provide函数return对象中，包含数据
  	return {
  	color:this.color 
  	}
  }
}

5.2 子孙节点可以使用 inject 数组，接收父级节点向下共享的数据：

<template>
  <h2> 子孙组件  ----  {{ }}</h2> 
</template>

<script>
export default {
	// 子孙组件，使用inject接收父节点向下共享的color 数据，并在页面上使用
	inject:['color']
}
</script>

5.3.父节点对外共享响应式的数据,需要再加处理，vue3.0可以使用computed 函数。

6.全局数据共享：vuex

总结