快捷導(dǎo)航

vue3 非父子組件通信詳解

更新時間：2021年10月09日 16:32:19 作者：嘴巴嘟嘟

本篇文章主要介紹了詳解Vue 非父子組件通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

第一種方法

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函數(shù)和Inject函數(shù)

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

我們可以通過 provide來提供數(shù)據(jù)：

provide可以傳入兩個參數(shù)：

name：提供的屬性名稱；

value：提供的屬性值；

在這里插入圖片描述