詳解Vue3常用的6種組件通信方式

更新時(shí)間：2024年09月25日 09:04:14 作者：知否技術(shù)

我們用Vue3開發(fā)項(xiàng)目時(shí),常常需要面對的一個(gè)問題就是組件之間的通信,如何將數(shù)據(jù)發(fā)給對應(yīng)的組件,這是不可避免的一個(gè)問題,該篇講述了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 = "知否技術(shù)";
  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 定義了響應(yīng)式變量 father ，包含 name 和 age 屬性。

2.父組件通過 import 導(dǎo)入子組件 child.vue，并在 template 中加載子組件。

3.通過 ":" 將子組件的 name 屬性和父組件的 father.name 屬性進(jìn)行綁定，將子組件的 age 屬性和父組件的 father.age 屬性進(jìn)行綁定，

4.父組件按鈕 click 事件綁定 changeData 方法，點(diǎn)擊按鈕修改父組件變量 father 的值。

5.子組件通過 defineProps 接收父組件傳遞的數(shù)據(jù)。其中子組件 name 變量接收父組件 father.name 的值，子組件 age 變量接收父組件 father.age 的值，

2. $emit

演示效果：

子組件可以使用 $emit 方法觸發(fā)一個(gè)事件，父組件可以通過監(jiān)聽這個(gè)事件來實(shí)現(xiàn)組件之間的通信。

父組件

<template>
  <div>
    <!-- 加載子組件 -->
    <child @changeFatherData="changeData"></child>
    <el-divider></el-divider>
    <div>父親姓名：{{ father.name }}</div>
    <div>父親年齡：{{ father.age }}</div>
  </div>
</template>
<script setup>
// 導(dǎo)入子組件
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: "知否技術(shù)", age: 299 });
};
</script>

通俗易懂講解：

1.在父組件中，通過 reactive 定義了響應(yīng)式變量 father ，包含 name 和 age 屬性。并通過插值表達(dá)式顯示 name 和 age 的初始值。

2.父組件通過 import 導(dǎo)入子組件 child.vue，并在 template 中加載子組件。

3.父組件定義修改 name 和 age 屬性的方法 changeData。通過 ”@“ 將子組件要調(diào)用的 changeFatherData 方法和父組件的 changeData 方法進(jìn)行綁定。

4.子組件通過 defineEmits 定義要調(diào)用的父組件的方法 changeFatherData。

5.子組件點(diǎn)擊按鈕通過 emits 調(diào)用定義的父組件方法 changeFatherData，并傳遞數(shù)據(jù)。

3. defineExpose 和 ref

演示效果

子組件通過 defineExpose 暴露需要共享的數(shù)據(jù)，父組件可以通過 ref 獲取子組件的數(shù)據(jù)。父組件需要定義一個(gè)和子組件 ref 屬性同名的變量。

父組件

<template>
  <div>
    <!-- 加載子組件 -->
    <child ref="childRef"></child>
    <!-- 點(diǎn)擊修改子組件數(shù)據(jù) -->
    <el-divider></el-divider>
    <el-button type="primary" @click="changeChildData">修改子組件數(shù)據(jù)</el-button>
  </div>
</template>
<script setup>
// 導(dǎo)入子組件
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("關(guān)注公眾號知否技術(shù),學(xué)技術(shù)不迷路！");
};
</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,
});
// 標(biāo)題
const title = ref("學(xué)點(diǎn)技術(shù)，漲點(diǎn)知識！");
// 修改標(biāo)題
const changeTitle = (value) => (title.value = value);
// 子組件暴露的數(shù)據(jù)
defineExpose({ child, changeTitle });
</script>

通俗易懂講解：

1.子組件定義相關(guān)的變量和方法，并通過 defineExpose 暴露相關(guān)數(shù)據(jù)。

2.父組件通過 import 導(dǎo)入子組件 child.vue，并在 template 中加載子組件。父組件定義 childRef 變量，通過 ref="childRef" 綁定子組件。

3.父組件點(diǎn)擊按鈕通過 childRef 修改子組件暴露的變量和方法。

4. provide 和 inject

演示效果

父組件通過 provide 向子孫組件傳遞數(shù)據(jù)，子孫組件通過 inject 接收數(shù)據(jù)

父組件

<template>
  <div>
    <!-- 加載子組件 -->
    <child ref="childRef"></child>
  </div>
</template>
<script setup>
// 導(dǎo)入子組件
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 用于在父子組件之間實(shí)現(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>
// 導(dǎo)入子組件
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", "知否技術(shù)");
  emit("update:age", 20);
};
</script>

通俗易懂講解：

1.子組件通過 v-model:name 綁定父組件的 fatherName 變量， v-model:age 綁定父組件的 fatherAge 變量。

2.子組件通過 defineEmits 定義綁定父組件的事件。

3.子組件通過 emit 發(fā)布事件，update:name 對應(yīng) v-model:name，update:age 對應(yīng) v-model:age。也就是 v-model：要和 update: 后面的屬性名一樣。

6. Vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。說白了就是把一些共享的數(shù)據(jù)放到 vuex 中，任何組件都可以進(jìn)行使用。

安裝 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');
    }
  },
  // 計(jì)算屬性
  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種組件通信方式的詳細(xì)內(nèi)容，更多關(guān)于Vue3組件通信方式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: