詳解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";
// 定義要調(diào)用父組件的方法
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。 通過 ”@“ 將子組件要調(diào)用的 changeFatherData 方法和父組件的 changeData 方法進行綁定。
4.子組件通過 defineEmits 定義要調(diào)用的父組件的方法 changeFatherData。
5.子組件點擊按鈕通過 emits 調(diào)用定義的父組件方法 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);
// 調(diào)用方法
const incrementCount = () => store.dispatch("increment");
</script>
以上就是詳解Vue3常用的6種組件通信方式的詳細內(nèi)容，更多關于Vue3組件通信方式的資料請關注腳本之家其它相關文章！
相關文章
vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖
因為工作中要用到甘特圖,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關于vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖的相關資料,需要的朋友可以參考下2022-11-11
Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-09-09
Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue生命周期函數(shù)調(diào)用詳解，本文將實現(xiàn)Vue生命周期相關代碼的核心邏輯，從源碼層面來理解生命周期，感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要給大家介紹了關于vue項目中按鈕防抖處理實現(xiàn)的相關資料,在項目開發(fā)中相必大家時常會遇到按鈕重復點擊后引起事件重復提交的問題,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue點擊頁面空白處實現(xiàn)保存功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關于前端vuex中dispatch使用方法的相關資料,vuex的dispatch方法用于觸發(fā)一個action,以便更新state,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix
這篇文章主要介紹了解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix`?option的報錯問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
這篇文章主要以vue3+vite+ts舉例,為大家詳細介紹了vue3中pinia的安裝與使用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-09-09