目錄

• 第一種方法
• App.
• Home.vue
• HomeContent.vue
• 資料的響應式
• 修改響應式Property
• 總結

業務場景是，不是父子元件實現通訊

檔案目錄

第一種方法

App.vue

<tempwww.cppcns.comlate>
  <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: ["張三NmWjm
 
","李四","王五"],methods: {
    addName() {
      this.names.push("fuck you");
      console.log("hhhh");
    },};
</script>
 <style scoped>
</style>

Home.vue

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

HomeContent.vue

<template>
  NmWjm<div>HomeContent:{{ name }}--{{ age }}---{{ length }}</div>
</template>
 <script>
export default {
  inject: ["name","age","length"],};
</script>
 <style lang="s" 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

如果我們需要修改可響應的資料，那麼最好是在資料提供的位置來修改：我們可以將修改方法進行共享，在後代元件中進行呼叫；

注意

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

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！