前端学习笔记（14）-Vue3组件传参

在Vue3中，组件传参可以通过props进行。以下是一个简单的例子：

1. 父组件：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentMessage = ref('Hello from parent!');
</script>

2. 子组件：

<template>
  <div>
    {{ message }}
  </div>
</template>
 
<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
  message: String
});
</script>

在这个例子中，ChildComponent 组件通过props接收了来自ParentComponent的message。在子组件中，我们使用defineProps定义了期望接收的props，并在模板中通过{{ message }}展示它。在父组件中，我们通过:message="parentMessage"将数据作为属性传递给子组件。使用ref是为了创建一个响应式的数据，这样当它的值改变时，子组件也会相应地更新。