詳解Vue3常用的6種組件通信方式
1. props
演示效果：
Props 是 Vue 中最常見的一種父組件將數(shù)據(jù)傳遞給子組件的方式。
父組件：
<template>
<div>
<el-button type="primary" @click="changeData">修改信息</el-button>
<el-divider></el-divider>
<!-- 2.加載子組件 -->
<child :name="father.name" :age="father.age"></child>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import child from "./components/child.vue";
// 1.父組件數(shù)據(jù)
let father = reactive({
name: "杰克",
age: 99,
});
// 3.修改數(shù)據(jù)
const changeData = () => {
father.name = "知否技術";
father.age = 199;
};
</script>
子組件：child.vue
<template>
<div>
<div>父親姓名：{{ props.name }}</div>
<div>父親年齡：{{ props.age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// defineProps 無需定義即可使用，用來接收父組件傳遞的數(shù)據(jù)
const props = defineProps({
name: {
type: String,
default: "",
},
age: {
type: Number,
default: 100,
},
});
</script>
通俗易懂講解：
1.在父組件中，通過 reactive 定義了響應式變量 father ，包含 name 和 age 屬性。
2.父組件通過 import 導入子組件 child.vue，并在 template 中加載子組件。
3.通過 ":" 將子組件的 name 屬性和父組件的 father.name 屬性進行綁定，將子組件的 age 屬性和父組件的 father.age 屬性進行綁定，
4.父組件按鈕 click 事件綁定 changeData 方法，點擊按鈕修改父組件變量 father 的值。
5.子組件通過 defineProps 接收父組件傳遞的數(shù)據(jù)。其中子組件 name 變量接收父組件 father.name 的值， 子組件 age 變量接收父組件 father.age 的值，
2. $emit
演示效果：
子組件可以使用 $emit 方法觸發(fā)一個事件，父組件可以通過監(jiān)聽這個事件來實現(xiàn)組件之間的通信。
父組件
<template>
<div>
<!-- 加載子組件 -->
<child @changeFatherData="changeData"></child>
<el-divider></el-divider>
<div>父親姓名：{{ father.name }}</div>
<div>父親年齡：{{ father.age }}</div>
</div>
</template>
<script setup>
// 導入子組件
import child from "./components/child.vue";
import { ref, reactive } from "vue";
// 父組件數(shù)據(jù)
let father = reactive({
name: "杰克",
age: 99,
});
// 修改數(shù)據(jù)
const changeData = (data) => {
father.name = data.name;
father.age = data.age;
};
</script>
子組件
<template>
<div>
<el-button type="danger" @click="changeCurrentData">修改父組件數(shù)據(jù)</el-button>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// 定義要調用父組件的方法
const emits = defineEmits(["changeFatherData"]);
// 修改父組件數(shù)據(jù)
const changeCurrentData = () => {
emits("changeFatherData", { name: "知否技術", age: 299 });
};
</script>
通俗易懂講解：
1.在父組件中，通過 reactive 定義了響應式變量 father ，包含 name 和 age 屬性。并通過插值表達式顯示 name 和 age 的初始值。
2.父組件通過 import 導入子組件 child.vue，并在 template 中加載子組件。
3.父組件定義修改 name 和 age 屬性的方法 changeData。 通過 ”@“ 將子組件要調用的 changeFatherData 方法和父組件的 changeData 方法進行綁定。
4.子組件通過 defineEmits 定義要調用的父組件的方法 changeFatherData。
5.子組件點擊按鈕通過 emits 調用定義的父組件方法 changeFatherData，并傳遞數(shù)據(jù)。
3. defineExpose 和 ref
演示效果
子組件通過 defineExpose 暴露需要共享的數(shù)據(jù)，父組件可以通過 ref 獲取子組件的數(shù)據(jù)。父組件需要定義一個和子組件 ref 屬性同名的變量。
父組件
<template>
<div>
<!-- 加載子組件 -->
<child ref="childRef"></child>
<!-- 點擊修改子組件數(shù)據(jù) -->
<el-divider></el-divider>
<el-button type="primary" @click="changeChildData">修改子組件數(shù)據(jù)</el-button>
</div>
</template>
<script setup>
// 導入子組件
import child from "./components/child.vue";
import { ref, reactive } from "vue";
// 綁定子組件
const childRef = ref(null);
// 修改子組件數(shù)據(jù)
const changeChildData = (data) => {
childRef.value.child.name = "知否君";
childRef.value.child.age = 20;
childRef.value.changeTitle("關注公眾號知否技術,學技術不迷路！");
};
</script>
子組件
<template>
<div>
<el-alert style="width: 30%" :title="title" type="error" effect="dark" />
<el-divider></el-divider>
<div>姓名：{{ child.name }}</div>
<div>年齡：{{ child.age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// 兒子信息
const child = reactive({
name: "李白",
age: 60,
});
// 標題
const title = ref("學點技術，漲點知識！");
// 修改標題
const changeTitle = (value) => (title.value = value);
// 子組件暴露的數(shù)據(jù)
defineExpose({ child, changeTitle });
</script>
通俗易懂講解：
1.子組件定義相關的變量和方法，并通過 defineExpose 暴露相關數(shù)據(jù)。
2.父組件通過 import 導入子組件 child.vue，并在 template 中加載子組件。父組件定義 childRef 變量，通過 ref="childRef" 綁定子組件。
3.父組件點擊按鈕通過 childRef 修改子組件暴露的變量和方法。
4. provide 和 inject
演示效果
父組件通過 provide 向子孫組件傳遞數(shù)據(jù)，子孫組件通過 inject 接收數(shù)據(jù)
父組件
<template>
<div>
<!-- 加載子組件 -->
<child ref="childRef"></child>
</div>
</template>
<script setup>
// 導入子組件
import child from "./components/child.vue";
import { ref, reactive, provide } from "vue";
// 傳遞數(shù)據(jù)
provide("name", "知否君");
provide("age", 12);
</script>
子組件
<template>
<div>
<div>姓名：{{ name }}</div>
<div>年齡：{{ age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive, inject } from "vue";
const name = inject("name");
const age = inject("age");
</script>
通俗易懂講解：
父組件通過 provide 向子組件傳遞數(shù)據(jù)，子組件通過 inject 接收數(shù)據(jù)
5. v-model
演示效果
v-model 用于在父子組件之間實現(xiàn)雙向數(shù)據(jù)綁定。
父組件
<template>
<div>
<!-- 加載子組件 -->
<child v-model:name="fatherName" v-model:age="fatherAge"></child>
<el-divider></el-divider>
<p>姓名：{{ fatherName }}</p>
<p>年齡：{{ fatherAge }}</p>
</div>
</template>
<script setup>
// 導入子組件
import child from "./components/child.vue";
import { ref, reactive, provide } from "vue";
const fatherName = ref("李白");
const fatherAge = ref("122");
</script>
子組件
<template>
<div><el-button type="primary" @click="changeData">修改數(shù)據(jù)</el-button></div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive, inject } from "vue";
const emit = defineEmits(["update:name", "update:age"]);
const changeData = () => {
emit("update:name", "知否技術");
emit("update:age", 20);
};
</script>
通俗易懂講解：
1.子組件通過 v-model:name 綁定父組件的 fatherName 變量， v-model:age 綁定父組件的 fatherAge 變量。
2.子組件通過 defineEmits 定義綁定父組件的事件。
3.子組件通過 emit 發(fā)布事件，update:name 對應 v-model:name，update:age 對應 v-model:age。也就是 v-model： 要和 update: 后面的屬性名一樣。
6. Vuex
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。說白了就是把一些共享的數(shù)據(jù)放到 vuex 中，任何組件都可以進行使用。
安裝 vuex
npm install vuex@next
在 /src/store 文件夾下新建 index.js 文件
import { createStore } from 'vuex';
export const store = createStore({
state: {
count: 0
},
mutations: {
incrementCount(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('incrementCount');
}
},
// 計算屬性
getters: {
getCount(state) {
return state.count;
}
}
});
在 main.js 里面配置 store
演示效果
父組件或者子組件
<template>
<div>
<p>count: {{ count }}</p>
<el-divider></el-divider>
<el-button type="primary" @click="incrementCount">新增</el-button>
</div>
</template>
<script setup>
import { useStore } from "vuex";
import { computed } from "vue";
const store = useStore();
const count = computed(() => store.getters.getCount);
// 調用方法
const incrementCount = () => store.dispatch("increment");
</script>
以上就是詳解Vue3常用的6種組件通信方式的詳細內容，更多關于Vue3組件通信方式的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue 微信授權解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文將結合實例代碼，解決Vue+SpringBoot+Shiro跨域問題，相信大家剛開始做都會遇到這個問題，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
這篇文章主要介紹了Vue 開發(fā)音樂播放器之歌手頁右側快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件詳解
這篇文章主要介紹了Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue+ECharts+高德地圖API實現(xiàn)天氣預報數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個數(shù)據(jù)的占比，走向，對于數(shù)據(jù)可視化，很多互聯(lián)網公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過Vue+ECharts+高德地圖API實現(xiàn)天氣預報數(shù)據(jù)可視化2023-06-06
為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue 路由meta 設置導航隱藏與顯示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue3獲取選中的el-table行數(shù)據(jù)方式
文章介紹Vue3中使用el-table獲取選中行數(shù)據(jù)的三種方法：推薦通過@selection-change事件獲取（ElementPlus最新實踐）,ElementUI可用selection屬性,而v-model:checked-rows已廢棄,強調根據(jù)庫版本選擇合適方案,確保兼容性2025-08-08