vue 3 setup javascript 语法父子传值

在 Vue 3 的 setup 语法糖中，父子组件传值主要通过 defineProps、defineEmits 和 defineExpose 实现。以下是具体实现方式及示例：

defineProps 父组件向子组件传值

父组件：通过 v-bind 绑定属性传递数据：

<template>
  <ChildComponent :message="message" />
</template>

<script setup>
import { ref } from "vue";
const message = ref("父组件消息");
</script>

子组件：通过 defineProps 接收数据：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { toRefs } from "vue";

// 里面的数组可以写多个
const props = defineProps(["message"]);
// 使用 toRefs 在 js 中保持响应式
const propsRefs = toRefs(props);

// 或者直接响应式解构
const { message } = defineProps(["message"]);
</script>

defineEmits 子组件向父组件传值

子组件：通过 defineEmits 定义事件并触发：

<template>
  <button @click="sendMessage">传递数据</button>
</template>

<script setup>
const emit = defineEmits(["messageEmit"]);
const sendMessage = () => {
  emit("messageEmit", "参数1"); // 触发事件并传值。参数可以有很多个。
};
</script>

父组件：监听子组件事件并处理：

<template>
  <ChildComponent @messageEmit="handleMessage" />
</template>

<script setup>
const handleMessage = (msg) => {
  console.log(msg); // 输出：'参数1'
};
</script>

defineExpose 父组件获取子组件的属性/方法

子组件：通过 defineExpose 暴露属性或方法

<script setup>
import { ref } from "vue";
const childData = ref("子组件数据");
defineExpose({
  childData,
});
</script>

父组件：通过 ref 访问子组件实例：

<template>
  <ChildComponent ref="childRef" />
  <button @click="getChildData">获取子组件数据</button>
</template>

<script setup>
import { ref } from "vue";

const childRef = ref(null);

const getChildData = () => {
  console.log(childRef.value.childData); // 输出：'子组件数据'
};
</script>

核心 API

• defineProps：接收父组件数据（类似 Vue2 的 props）。
• defineEmits：定义子组件向父组件传递的事件（替代 Vue2 的 this.$emit）。
• defineExpose：暴露子组件属性/方法供父组件通过 ref 调用。

注意事项

• 无需手动导入 defineProps、defineEmits、defineExpose，它们由编译器自动处理。
• 子组件未通过 defineExpose 暴露的属性，父组件无法通过 ref 访问。

通过以上方式，可以简洁高效地实现 Vue3 父子组件间的数据通信。