什么是非父子組件通信

本篇內容主要講解“什么是非父子組件通信”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“什么是非父子組件通信”吧!

目錄

• App.vue

• Home.vue

• HomeContent.vue

• 數據的響應式

• 修改響應式Property

  
  

業務場景是，不是父子組件實現通信

文件目錄

App.vue

<template>
  <div>
    <Home></Home>
    <button @click="addName">增加名字</button>
  </div>
</template>
 <script>
import Home from "./Home.vue";
import { computed } from "vue";
export default {
  name: "App",
  components: {
    Home,
  },
  provide() {
    return {
      name: "張三",
      age: 23,
      length: computed(() => this.names.length),
    };
  },
  data() {
    return {
      names: ["張三", "李四", "王五"],
    };
  },
  methods: {
    addName() {
      this.names.push("fuck you");
      console.log("hhhh");
    },
  },
};
</script>
 <style scoped>
</style>

Home.vue

<template>
  <div>
    <div>我是home</div>
    <home-content></home-content>
  </div>
</template>
 <script>
import HomeContent from "./HomeContent.vue";
export default {
  name: "Home",
  components: {
    HomeContent,
  },
};
</script>
 <style scoped>
</style>

HomeContent.vue

<template>
  <div>HomeContent:{{ name }}--{{ age }}---{{ length }}</div>
</template>
 <script>
export default {
  inject: ["name", "age", "length"],
};
</script>
 <style lang="scss" scoped>
</style>

vue3中使用Provide函數和Inject函數

事實上我們之前還學習過Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的選項。

我們可以通過 provide來提供數據：

provide可以傳入兩個參數：

name：提供的屬性名稱；

value：提供的屬性值；

在 后代組件 中可以通過 inject 來注入需要的屬性和對應的值：

可以通過 inject 來注入需要的內容；

inject可以傳入兩個參數：

要 inject 的 property 的 name；

默認值；

數據的響應式

為了增加 provide 值和 inject 值之間的響應性，我們可以在 provide 值時使用 ref 和 reactive。

修改響應式Property

如果我們需要修改可響應的數據，那么最好是在數據提供的位置來修改：我們可以將修改方法進行共享，在后代組件中進行調用；

注意

如果我們子組件應該是只能使用，不能修改的狀態

到此，相信大家對“什么是非父子組件通信”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！