快捷導(dǎo)航

vue3 非父子組件通信詳解

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

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

第一種方法

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ù)

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

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

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

name：提供的屬性名稱；

value：提供的屬性值；

在這里插入圖片描述

在后代組件中可以通過 inject 來注入需要的屬性和對(duì)應(yīng)的值：

可以通過 inject 來注入需要的內(nèi)容；

inject可以傳入兩個(gè)參數(shù)：

要 inject 的 property 的 name；

默認(rèn)值；

在這里插入圖片描述

數(shù)據(jù)的響應(yīng)式

為了增加 provide 值和 inject 值之間的響應(yīng)性，我們可以在 provide 值時(shí)使用 ref 和 reactive。

修改響應(yīng)式Property

如果我們需要修改可響應(yīng)的數(shù)據(jù)，那么最好是在數(shù)據(jù)提供的位置來修改：我們可以將修改方法進(jìn)行共享，在后代組件中進(jìn)行調(diào)用；

注意

如果我們子組件應(yīng)該是只能使用，不能修改的狀態(tài)

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過程
Unity webgl嵌入到前端網(wǎng)頁中,前端通過調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過程,需要的朋友可以參考下
2024-01-01
vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue如何下載本地pdf文件
這篇文章主要介紹了vue如何下載本地pdf文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(shù)，本文通過完整代碼給大家詳細(xì)講解，需要的朋友可以參考下
2022-10-10
vue-resourc發(fā)起異步請(qǐng)求的方法
這篇文章主要介紹了vue-resourc發(fā)起異步請(qǐng)求的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory
這篇文章主要介紹了解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue+Canvas繪圖使用的講解
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-09-09
element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
探索Vue.js component內(nèi)容實(shí)現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11