Vue3组件传值

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