父向子傳遞數(shù)據(jù)是通過 props，子向父是通過 events（$emit）；
通過父鏈 / 子鏈也可以通信（$parent / $children）；
ref 也可以訪問組件實例；
provide / inject；
$attrs/$listeners；

Bus
Vuex

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

provide：Object | () => Object
inject： Array<string> | { [key: string]: string | Symbol | Object }

provide 選項應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的 property。
在該對象中可使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。
inject 選項應(yīng)該是：
  一個字符串數(shù)組，或
  一個對象，對象的 key 是本地的綁定名，value 是：
      在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，或
      一個對象，該對象的：
         from property 是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)
         default property 是降級情況下使用的 value
provide 和 inject 主要在開發(fā)高階插件/組件庫時使用。并不推薦用于普通應(yīng)用程序代碼中。
這對選項是成對使用的。子孫組件想要獲取祖先組件得資源，那么怎么辦呢，總不能一直取父級往上吧，而且這樣代碼結(jié)構(gòu)容易混亂。這個就是這對選項要干的事情。

<template>
  <div>
    <button @click="changeMsg">祖組件觸發(fā)</button>
    <h1>祖組件</h1>
    <parent></parent>
  </div>
</template>
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布蘭登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.傳入一個可監(jiān)聽的對象
      developerFn:() => this.developer, // 方式2.通過 computed 來計算注入的值
      year: this.year, // 方式3.直接傳值
      app: this, // 方式4. 提供祖先組件的實例 缺點：實例上掛載很多沒有必要的東西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

<template>
  <div class="wrap">
    <h4>子組件（只做中轉(zhuǎn)）</h4>
    <child></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

<template>
  <div>
    <h5>孫組件</h5>
    <span>名稱：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>誕生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>

<template>
  <div>
    <h1>祖組件</h1>
    <span>名稱：{{obj.name}}</span> |
    <span>最后更新于：{{update}}</span>
    <parent></parent>
  </div>
</template>
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, 
      app: this,
    }
  },
  components: {
    parent,
  },
}
</script>

<template>
  <div>
    <button @click="changeMsg">孫組件觸發(fā)</button>
    <h3>孫組件</h3>
    <span>名稱：{{obj.name}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
<script>
export default {
  inject:['obj','app'],
  methods: {
    changeMsg(){
      this.obj.name = 'React';
      this.app.update = '2020年10月';
    }
  },
}
</script>

// 父組件
data() {
    return {
      name: "卷兒"
    }
  },
  provide: function() {
    return {
      newName: () => this.name
    }
// 子組件
inject: ['newName'],
computed: {
   hnewName() {
     return this.newName()
   }
 }
<!-- 子組件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推薦使用這種方法 -->
<h2>{{ newName() }}</h2>

// 父組件
data() {
    return {
      obj: {
        name: "卷兒"
      }
    }
  },
  provide: function() {
    return {
    // 傳遞一個對象
      obj: this.obj
    }
  },
// 子組件
inject: ['obj'],
computed: {
	// 也可以不用計算屬性重新定義
   objName() {
     return this.obj.name
   }
 }
<!-- 子組件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>