Vue组件通讯

最新推荐文章于 2025-05-28 18:15:13 发布

不良人&不良帅

最新推荐文章于 2025-05-28 18:15:13 发布

阅读量541

点赞数 14

分类专栏： vue3 文章标签： vue.js 前端 typescript

本文链接：https://blog.youkuaiyun.com/CjiangN/article/details/143381296

版权

vue3 专栏收录该内容

3 篇文章

订阅专栏

1. props

演示效果：

640?wx_fmt=gif&from=appmsg&wxfrom=13

★
Props 是 Vue 中最常见的一种父组件将数据传递给子组件的方式。

父组件：

<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.父组件数据
let father = reactive({
  name: "杰克",
  age: 99,
});
// 3.修改数据
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 无需定义即可使用，用来接收父组件传递的数据
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 接收父组件传递的数据。其中子组件 name 变量接收父组件 father.name 的值，子组件 age 变量接收父组件 father.age 的值，

2. $emit

演示效果：

640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

★
子组件可以使用 $emit 方法触发一个事件，父组件可以通过监听这个事件来实现组件之间的通信。

父组件

<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";
// 父组件数据
let father = reactive({
  name: "杰克",
  age: 99,
});
// 修改数据
const changeData = (data) => {
  father.name = data.name;
  father.age = data.age;
};
</script>

子组件

<template>
  <div>
    <el-button type="danger" @click="changeCurrentData">修改父组件数据</el-button>
  </div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// 定义要调用父组件的方法
const emits = defineEmits(["changeFatherData"]);
// 修改父组件数据
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，并传递数据。

3. defineExpose 和 ref

演示效果

640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

★
子组件通过 defineExpose 暴露需要共享的数据，父组件可以通过 ref 获取子组件的数据。父组件需要定义一个和子组件 ref 属性同名的变量。

父组件

<template>
  <div>
    <!-- 加载子组件 -->
    <child ref="childRef"></child>
    <!-- 点击修改子组件数据 -->
    <el-divider></el-divider>
    <el-button type="primary" @click="changeChildData">修改子组件数据</el-button>
  </div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive } from "vue";
// 绑定子组件
const childRef = ref(null);
// 修改子组件数据
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);
// 子组件暴露的数据
defineExpose({ child, changeTitle });
</script>

通俗易懂讲解：

1.子组件定义相关的变量和方法，并通过 defineExpose 暴露相关数据。

2.父组件通过 import 导入子组件 child.vue，并在 template 中加载子组件。

父组件定义 childRef 变量，通过 ref="childRef" 绑定子组件。

3.父组件点击按钮通过 childRef 修改子组件暴露的变量和方法。

4. provide 和 inject

演示效果

640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

★
父组件通过 provide 向子孙组件传递数据，子孙组件通过 inject 接收数据

父组件

<template>
  <div>
    <!-- 加载子组件 -->
    <child ref="childRef"></child>
  </div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive, provide } from "vue";
// 传递数据
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 向子组件传递数据，子组件通过 inject 接收数据

5. v-model

演示效果

640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

★
v-model 用于在父子组件之间实现双向数据绑定。

父组件

<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">修改数据</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 发布事件，update:name 对应 v-model:name，update:age 对应 v-model:age。也就是 v-model：要和 update: 后面的属性名一样。

6. Vuex

★
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说白了就是把一些共享的数据放到 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

640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

演示效果

640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

父组件或者子组件

<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>