一文搞定Vue2組件通信

来源:https://www.cnblogs.com/yuyunhao/archive/2022/07/28/16527926.html
-Advertisement-
Play Games

vue 組件通信方式 父組件將自己的狀態分享給子組件使用； 方法：父組件通過子標簽傳遞數據，子組件通過 props 接收 子組件改變父組件的狀態; 方法：父組件在子標簽上通過@abc 提供一個改變自身狀態的方法，子組件通過$emit("abc", payload)觸發這個函數 父組件直接改變子組件的 ...


vue 組件通信方式

  1. 父組件將自己的狀態分享給子組件使用；

    方法：父組件通過子標簽傳遞數據，子組件通過 props 接收

  2. 子組件改變父組件的狀態;

    方法：父組件在子標簽上通過@abc 提供一個改變自身狀態的方法，子組件通過$emit("abc", payload)觸發這個函數

  3. 父組件直接改變子組件的狀態；

    方法：父組件設法($ref,$children[0])拿到子組件實例對象，然後通過實例對象直接修改子組件狀態

  4. 子組件直接改變父組件的狀態

    方法：子組件通過$parent拿到父組件的改變自身狀態的方法，然後直接調用（$parent 可以拿到父組件狀態，但是最好不要直接修改，而是通過父組件函數式修改，保持單向數據流）

  5. 父組件通過插槽向子組件傳遞數據

    方法：子組件定義具名插槽，父組件向插槽內傳遞自己的狀態

  6. 父組件向後代組件傳值

    方法：父組件正常在標簽上向子組件傳遞數據，子組件不用 props 接收屬性，通過$attrs獲取屬性，通過$listeners 獲取方法。子組件再向下傳遞時，使用 v-bind="$attr"傳遞屬性，使用v-on="$listeners"傳遞方法

  7. 父組件向後代組件傳值

    方法：父組件js中定義provide函數提供數據源，後代組件通過inject去接收，inject可以是一個數組或對象。

    註意：父組件提供的數據源如果不是響應式的，那麼後代修改數據，數據不會響應變化。如果父組件提供的數據源是響應式的，但是不是一個對象，那麼它也不是響應式的，所以要用對象在外包一層對象（數組不行）。另外，如果子組件同時provide一個inject祖先組件相同名稱的數據，那麼子組件的後代會就近使用子組件的數據。

    官網tip：provide 和 inject 綁定並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的 property 還是可響應的。

    https://cn.vuejs.org/v2/api/#provide-inject

  8. 全局通信-事件匯流排

    方法：通過註冊一個新的vue實例作為橋梁，使用$on和$emit來完成通信

  9. 全局通信-vuex

    略（看官方文檔嘍）

    https://vuex.vuejs.org/zh/

第一種： props傳參

// 父組件向子組件傳遞msg
<template>
  <div>
    <p>我是dad</p>
    <Child :msg="msg" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      msg: "父親的忠告",
    };
  },
};
</script>

// 子組件props接收
<template>
  <div>
    <p>我是子組件</p>
    <span>{{ msg }}</span>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "什麼都沒有",
    },
  },
};
</script>

第二種：emit，on通信

// 父組件向子組件提供改變自己狀態的函數
<template>
  <div>
    <p>我是dad</p>
    <Child @changeMyMind="changeMyMind" />
    <span>{{ mind }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      mind: "偉大萬歲",
    };
  },
  methods: {
    changeMyMind(yourMind) {
      this.mind = yourMind;
    },
  },
};
</script>


// 子組件不用接收，直接通過$emit觸發並傳參就行
<template>
  <div>
    <p>我是子組件</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit("changeMyMind", "躺平鳥");
  },
};
</script>

第三種：$ref,$children實例通信

// 父組件通過$ref或者$children拿到子組件實例，然後直接修改子組件狀態
/**
 * this.$children`數組中的元素不是響應式的，並且下標並不一定對用父組件引用的子組件的順序，例如有非同步載入的子組件，可能影響其在 children 數組中的順序。所以使用時需要根據一定的條件例如子組件的name去找到相應的子組件。
 **/
<template>
  <div>
    <p>我是dad</p>
    <Child ref="childRef" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  mounted() {
    // this.$children[0].childMsg = "不你不是";
    this.$refs.childRef.childMsg = "不你不是";
  },
};
</script>



// 子組件等著被改就行
<template>
  <div>
    <p>我是子組件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子組件數據",
    };
  },
};
</script>

第四種：$parent通信

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <Child />
    <span>{{ aa }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "",
    };
  },
  methods: {
    changeAa(data) {
      this.aa = data;
    },
  },
};
</script>

// 子組件通過$parent拿到父組件實例，然後直接修改父組件狀態
<template>
  <div>
    <p>我是子組件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子組件數據",
    };
  },
  mounted() {
    // this.$parent.aa = "我改了哈"; 不推薦
    this.$parent.changeAa("我改了哦");
  },
};
</script>

第五種：插槽通信（一般不用）

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <Child>
      <template v-slot:boring>
        {{ aa }}
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "父組件的數據哦",
    };
  },
};
</script>


// 子組件定義插槽
<template>
  <div>
    <p>我是子組件</p>
    <slot name="boring"></slot>
  </div>
</template>

<script>
export default {};
</script>

第六種：$attr,$listener深層雙向通信

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son :dadData="dadData" @changeDadData="changeDadData" @keyup="someKeyUp" />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "父組件的數據哦",
    };
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
    someKeyUp(e) {
      console.log(e.target.value);
    },
  },
};
</script>



// 兒子組件
<template>
  <div>
    <p>我是兒子組件</p>
    <span>{{ $attrs.dadData }}</span>
    <input type="text" v-on="$listeners" />
    <GrandSon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  mounted() {
    console.log(this.$listeners);
  },
};
</script>

// 孫子組件
<template>
  <div>
    <p>我是孫子組件</p>
    <input type="text" @input="grandsonInput" />
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      //   this.$emit("changeDadData", e.target.value); 也可以觸發
      this.$listeners.changeDadData(e.target.value);
    },
  },
};
</script>

第七種：provide，inject依賴註入深層次單向通信

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadMessage }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  provide() {
    return {
      message: this.dadMessage,
    };
  },
  data() {
    return {
      dadMessage: {
        textContent: "我是個祖先數據",
      },
    };
  },
};
</script>


// 兒子組件
<template>
  <div>
    <p>我是兒子組件</p>
    <span>{{ theData }}</span>
    <GrandSon />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  inject: {
    // 起個別名
    theData: {
      // 數據來源映射
      from: "message",
      // 預設值
      default: () => ({ message: { textContent: "啥也不是" } }),
    },
  },
};
</script>


// 孫子組件
<template>
  <div>
    <p>我是孫子組件</p>
    <input type="text" @input="grandsonInput" />
    <span>{{ message.textContent }}</span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.message.textContent = e.target.value;
    },
  },
  inject: ["message"],
};
</script>

第八種： $bus事件匯流排全局通信

// main.js中定義新的vue實例掛載到原型上
Vue.prototype.$bus = new Vue();

// 父組件通過this.$bus.$on監聽事件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "我是爹地",
    };
  },
  mounted() {
    this.$bus.$on("changeDadData", this.changeDadData);
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
  },
  // 記得清除監聽
  beforeDestroy() {
    this.$bus.$off("changeDadData");
  },
};
</script>


// 孫子組件通過this.$bus.$emit觸發事件
<template>
  <div>
    <p>我是孫子組件</p>
    <input type="text" @input="grandsonInput" />
    <span></span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.$bus.$emit("changeDadData", e.target.value);
    },
  },
};
</script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何讓照片中的人物笑起來？HMS Core視頻編輯服務一鍵微笑功能，讓人物笑容更自然
    最近一鍵“露齒笑”席卷全網，無論是短視頻用戶還是社交App用戶都在使用這項黑科技。當三兩好友聚會拍集體照留念時，為了處理個別人的表情“瑕疵”，讓大家都儘量保持微笑，總要進行表情微調，但如果需要進行複雜的換頭換臉等P圖操作，對用戶來說門檻太高。有些用戶“鏡頭恐懼”，拍照時不會微笑、表情尷尬；有些用戶對 ...
  • day01小程式快速入門
    這幾天正式開始微信小程式的修煉了，就目前而言來看簡直就是vue和react的結合體，所以在學小程式前，先把框架熟悉還是挺有用的。 一.簡介 1.1與普通網頁區別 二.第一個小程式 需要註冊小程式開發賬號，==最主要是獲得AppId== 然後就需要安裝 ==微信開發者工具== 2.1設置外觀和代理 2 ...
  • day 04 函數《有趣的遞歸函數》
    函數函數概述函數 實際就是多行代碼的抽取（多行代碼會構成特定的功能）（方法）函數的優點減少冗餘代碼（重覆的代碼放在函數裡面 在需要的時候調用）函數封裝（特定的一些代碼使用函數來包起來），提高了代碼的可維護性及可閱讀性函數的分類1.系統函數 window裡面的所有函數都屬於系統函數 (console. ...
  • 學習Js-day04
    今天學習了函數，主要還是邏輯思維的鍛煉，頭腦要靈活。總結：多做演算法題！！！😭😭😭😭 函數以及優點 實際就是多行代碼的抽取（多行代碼會構成特定的功能），減少冗餘代碼，函數封裝，提高了可維護性和可閱讀性。 函數的分類 系統函數：window裡面所有的函數都屬於系統函數console.log(), ...
  • js中函數的概念及方法
    函數的概述 函數 實際就是多行代碼的抽取（多行代碼會構成特定的功能）（方法） 函數的優點 減少冗餘代碼（重覆的代碼放在函數裡面 在需要的時候調用）函數封裝（特定的一些代碼使用函數來包起來）， 提高了代碼的可維護性及可閱讀性。 函數的分類 系統函數 window裡面的所有函數都屬於系統函數 (cons ...
  • CSS的簡單瞭解
    一、什麼是CSS CSS是一門語言，用於控制網頁表現 樣式定義如何顯示 HTML 元素 樣式通常存儲在樣式表中，外部樣式表可以極大提高工作效率 外部樣式表通常存儲在 CSS 文件中 多個樣式定義可層疊為一個 二、CSS導入方式 CSS導入HTML有三種方式： 內部樣式：在標簽內部使用style屬性， ...
  • 拓展運算符是深拷貝還是淺拷貝
    對於拓展運算符是深拷貝還是淺拷貝網上怎麼說的都有，我就說一下我的理解。 什麼是深拷貝？什麼是淺拷貝？ 假如B複製了A，修改A的時候，看B是否發生變化： 如果B也跟著變了，說明是淺拷貝，拿別人手段！ 如果B沒有改變，說明是深拷貝，自食其力！ 怎麼判斷拓展運算符是什麼拷貝呢？ 看一下下麵的例子： let ...
  • Vue2：註冊全局組件的兩種方法
    第一種：在main.js中直接註冊 //引入 import FixedTop from '@/components/FixedTop //註冊為全局組件 Vue.componet('FixedTop',FixedTop) //頁面直接使用 <FixedTop /> 缺點：如果我們需要註冊的全局組件非 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類