Vue3组件传值

Redundantº

已于 2023-06-12 18:21:32 修改

阅读量543

点赞数

分类专栏： Vue3学习记录文章标签： javascript 开发语言 ecmascript vue.js

于 2023-06-08 17:24:53 首次发布

本文链接：https://blog.csdn.net/qq_45256497/article/details/131111728

版权

Vue3学习记录专栏收录该内容

7 篇文章

订阅专栏

文章详细介绍了在Vue3中如何进行组件间的通信，包括父组件向子组件传递数据使用`defineProps`，子组件向父组件传递数据利用`defineEmits`触发自定义事件，以及如何借助mitt插件实现兄弟组件之间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父传子

父组件中：

<template>
  <div class="box">父组件</div>
  <Child title="传给子组件" :msg="msg"></Child>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
const msg = "一条消息";
</script>

<style scoped>
.box {
  width: 500px;
  height: 300px;
  background: #dcd8d8;
}
</style>

使用setup组合式api就不能使用export default{}

子组件中使用defineProps接收数据，defineProps是vue3提供的方法，接收到的数据是只读的

<template>
  <div class="son">子组件--{{ title }}--{{ msg }}</div>
</template>

<script setup lang="ts">
// 需要使用defineProps方法去接受父组件传递过来的数据
// defineProps是vue3提供的方法
// props的数据是只读的
let props = defineProps(["title", "msg"]);
console.log(props);
</script>

<style scoped>
.son {
  width: 300px;
  height: 100px;
  background: pink;
}
</style>

2、子传父

在子组件中利用defineEmits方法里返回函数触发自定义事件

<template>
  <div class="son">子组件</div>
  <button @click="handel">点击触发自定义事件</button>
</template>

<script setup lang="ts">
// 利用defineEmits方法里返回函数触发自定义事件
let emit = defineEmits([]);
const handel = () => {
  // 第一个参数是事件类型，之后的参数就是要传递的数据
  emit("change", "改变后的值");
};
</script>

父组件中通过子组件的自定义方法接收数据

<template>
  <event @change="getMsg"></event>
</template>

<script setup lang="ts">
import event from "./Event1.vue";
const getMsg = (data) => {
  console.log(data);
};
</script>

3、兄弟组件传值

引入mitt插件