Vue3组件式父子传值

时间：2024-11-03 11:58:39

下面是使用 <script setup> 语法的 Vue 3 组件之间传值的示例。

示例 1：使用 Props 和 Emits

父组件
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :message="parentMessage" @reply="handleReply" />
    <p>子组件回复: {{ childReply }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent');
const childReply = ref('');

const handleReply = (reply) => {
  childReply.value = reply;
};
</script>
子组件
<template>
  <div>
    <h2>子组件</h2>
    <p>来自父组件的消息: {{ message }}</p>
    <button @click="sendReply">回复</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  message: String
});

const emit = defineEmits(['reply']);

const sendReply = () => {
  emit('reply', 'Hello from Child');
};
</script>

示例 2：使用 Provide/Inject

父组件
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const sharedMessage = ref('Hello from Parent');
provide('sharedMessage', sharedMessage);
</script>
子组件
<template>
  <div>
    <h2>子组件</h2>
    <p>来自父组件的共享消息: {{ sharedMessage }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const sharedMessage = inject('sharedMessage');
</script>

总结

  • Props 和 Emits 用于父子组件间的数据传递。
  • Provide/Inject 适用于跨级或兄弟组件间的共享数据。

这种方式简单而直观，适合使用 <script setup> 的场景！如果还有其他问题，随时问我。

相关文章