非父子組件通信（父?jìng)鲗O）

父組件傳遞給孫組件：通過(guò)provide/inject來(lái)共享數(shù)據(jù)裂明。

在一些深度嵌套的場(chǎng)景中，子組件要想獲取父組件里面的部分?jǐn)?shù)據(jù)葫哗，可以使用props逐級(jí)傳遞的方法挎狸，但這樣會(huì)顯得非常麻煩。所以在這種場(chǎng)景下硝训，一般父組件使用provide來(lái)提供數(shù)據(jù)，而子孫組件使用inject來(lái)使用父組件提供的數(shù)據(jù)新思。

一般使用

三個(gè)組件窖梁，app.vue home.vue homecontent.vue，這三個(gè)為層層嵌套關(guān)系夹囚。

""" app.vue """
<template>
  <home/>
</template>

<script>
  import Home from "./home";
  export default {
    name: "App",
    components: {Home},
  }
</script>

""" home.vue """
<template>
  <homecontent/>
</template>

<script>
  import Homecontent from "./homecontent";
  export default {
    name: "home",
    components: {Homecontent}
  }
</script>

""" homecontent.vue """
<template>
  <div>
    孫組件
  </div>
</template>

<script>
  export default {
    name: "homecontent"
  }
</script>

在父組件中使用provide來(lái)定義數(shù)據(jù)纵刘。

""" app.vue 父組件 """
<template>
  <home/>
</template>

<script>
  import Home from "./home";
  export default {
    name: "App",
    components: {Home},
    provide: {
      name: "xxcfun",
      age: "18"
    }
  }
</script>

在孫組件中使用inject來(lái)使用這些數(shù)據(jù)。

""" homecontent.vue 孫組件 """
<template>
  <div>
    孫組件 <br/>
    {{name}} - {{age}}
  </div>
</template>

<script>
  export default {
    name: "homecontent",
    inject: ["name", "age"]
  }
</script>

這樣就能實(shí)現(xiàn)非父子組件之間共享數(shù)據(jù)：

zjtxfs.png

拓展用法

• 使用data定義的數(shù)據(jù)

如果在父組件中想使用data里面定義的數(shù)據(jù)崔兴，直接在provide中使用this來(lái)指向data數(shù)據(jù)是行不通的彰导，在provide作用域里面是拿不到data數(shù)據(jù)的蛔翅，會(huì)出現(xiàn)undefined的情況敲茄。

如果有這樣的需求，得在provide中做下修改山析，把對(duì)象數(shù)據(jù)改為函數(shù)返回對(duì)象的格式堰燎。

""" app.vue """
<template>
  <home/>
</template>

<script>
  import Home from "./home";
  export default {
    name: "App",
    components: {Home},
    provide() {
      return {
        name: "xxcfun",
        age: "18",
        hobby: this.hobby,
        hobbynum: this.hobby.length
      }
    },
    data() {
      return {
        hobby: ["football", "bike"]
      }
    }
  }
</script>

""" homecontent.vue """
<template>
  <div>
    孫組件 <br/>
    {{name}} - {{age}} <br/>
    {{hobby}} - {{hobbynum}}
  </div>
</template>

<script>
  export default {
    name: "homecontent",
    inject: ["name", "age", "hobby", "hobbynum"]
  }
</script>

zjtxdata.png

• 使用響應(yīng)式數(shù)據(jù)

在父組件中添加一個(gè)點(diǎn)擊事件，增加一個(gè)hobby笋轨。

""" app.vue """
<template>
  <home/>
  <button @click="addHobby">添加一個(gè)hobby</button>
</template>

<script>
  import Home from "./home";
  export default {
    name: "App",
    components: {Home},
    provide() {
      return {
        name: "xxcfun",
        age: "18",
        hobby: this.hobby,
        hobbynum: this.hobby.length
      }
    },
    data() {
      return {
        hobby: ["football", "bike"]
      }
    },
    methods: {
      addHobby() {
        this.hobby.push("games")
      }
    }
  }
</script>

在點(diǎn)擊一次按鈕后秆剪，會(huì)發(fā)現(xiàn)孫組件hobby的內(nèi)容添加上了games，但后面的長(zhǎng)度還是顯示2爵政。

zjtxerro.png

有這樣的需求的話仅讽，這里得需要用到一個(gè)計(jì)算屬性，每次hobby改變的時(shí)候钾挟，length也實(shí)時(shí)進(jìn)行計(jì)算洁灵。

""" app.vue """
<template>
  <home/>
  <button @click="addHobby">添加一個(gè)hobby</button>
</template>

<script>
  import Home from "./home";
  import { computed } from "vue";
  export default {
    name: "App",
    components: {Home},
    provide() {
      return {
        name: "xxcfun",
        age: "18",
        hobby: this.hobby,
        hobbynum: computed(() => this.hobby.length)
      }
    },
    data() {
      return {
        hobby: ["football", "bike"]
      }
    },
    methods: {
      addHobby() {
        this.hobby.push("games")
      }
    }
  }
</script>

這樣點(diǎn)擊兩次后，增加了兩個(gè)games掺出，后面的數(shù)量也變成了4徽千。

zjtxcom.png

~END