父子组件传值方式

在 Vue 3 中，父子组件之间传值主要有以下几种常见方式，下面将详细介绍并给出演示代码。

1. 父组件向子组件传值：使用 props

原理

props 是 Vue 中用于在父组件向子组件传递数据的机制。父组件通过在子组件标签上绑定属性的方式将数据传递给子组件，子组件通过 defineProps 来接收这些数据。

示例代码

父组件 ParentComponent.vue

<template>
  <div>
    <h1>父组件</h1>
    <!-- 向子组件传递数据 -->
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

// 定义要传递给子组件的数据
const parentMessage = ref('这是来自父组件的消息');
</script>

子组件 ChildComponent.vue

<template>
  <div>
    <h2>子组件</h2>
    <!-- 显示从父组件接收到的数据 -->
    <p>{{ message }}</p>
  </div>
</template>

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

// 定义接收的 props
const props = defineProps({
  message: String
});
</script>

2. 子组件向父组件传值：使用自定义事件（$emit 或 defineEmits）

原理

子组件通过触发自定义事件并传递数据，父组件监听这些事件并处理传递过来的数据。在 Vue 3 的 `` 中，使用 defineEmits 来声明自定义事件。

示例代码

子组件 ChildComponent.vue

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessageToParent">向父组件发送消息</button>
  </div>
</template>

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

// 定义自定义事件
const emits = defineEmits(['childMessage']);

const sendMessageToParent = () => {
  // 触发自定义事件并传递数据
  emits('childMessage', '这是来自子组件的消息');
};
</script>

父组件 ParentComponent.vue

<template>
  <div>
    <h1>父组件</h1>
    <!-- 监听子组件的自定义事件 -->
    <ChildComponent @childMessage="handleChildMessage" />
    <!-- 显示从子组件接收到的数据 -->
    <p v-if="childMessage">{{ childMessage }}</p>
  </div>
</template>

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

const childMessage = ref('');

const handleChildMessage = (message) => {
  childMessage.value = message;
};
</script>

3. 使用 v-model 实现双向数据绑定

原理

v-mdel 是 Vue 中用于实现双向数据绑定的语法糖。在父子组件之间使用 v-model 时，父组件通过 :modelValue 传递数据，子组件通过 update:modelValue 事件将数据的变化通知给父组件。

示例代码

子组件 ChildComponent.vue

<template>
  <div>
    <h2>子组件</h2>
    <!-- 绑定输入框的值到 modelValue -->
    <input v-model="modelValue" @input="updateValue">
  </div>
</template>

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

// 定义接收的 props 和自定义事件
const props = defineProps({
  modelValue: String
});
const emits = defineEmits(['update:modelValue']);

const updateValue = (event) => {
  // 触发 update:modelValue 事件并传递新的值
  emits('update:modelValue', event.target.value);
};
</script>

父组件 ParentComponent.vue

<template>
  <div>
    <h1>父组件</h1>
    <!-- 使用 v-model 绑定数据 -->
    <ChildComponent v-model="parentValue" />
    <!-- 显示数据 -->
    <p>{{ parentValue }}</p>
  </div>
</template>

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

const parentValue = ref('初始值');
</script>

4. 使用 provide 和 inject 进行跨级组件传值

原理

provide 和 inject 是 Vue 提供的一种用于跨级组件传值的方式。父组件通过 provide 提供数据，子孙组件通过 inject 注入这些数据。

示例代码

祖先组件 AncestorComponent.vue

<template>
  <div>
    <h1>祖先组件</h1>
    <ChildComponent />
  </div>
</template>

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

// 定义要提供的数据
const sharedData = ref('这是共享数据');
// 提供数据
provide('sharedData', sharedData);
</script>

子组件 ChildComponent.vue

<template>
  <div>
    <h2>子组件</h2>
    <!-- 显示从祖先组件注入的数据 -->
    <p>{{ injectedData }}</p>
    <GrandChildComponent />
  </div>
</template>

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

// 注入数据
const injectedData = inject('sharedData');
</script>

孙组件 GrandChildComponent.vue

<template>
  <div>
    <h3>孙组件</h3>
    <!-- 显示从祖先组件注入的数据 -->
    <p>{{ injectedData }}</p>
  </div>
</template>

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

// 注入数据
const injectedData = inject('sharedData');
</script>

通过以上几种方式，你可以在 Vue 3 中实现父子组件以及跨级组件之间的数据传递。