一文搞定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
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類