vue3 <script setup>父传子

在Vue 3中，可以使用`<script setup>`语法来编写组件。这种语法实际上是将组件的逻辑代码和模板代码进行分离，从而简化组件的编写过程。在`<script setup>`中，可以使用`defineProps`来定义组件的属性，然后通过组件的模板代码来访问这些属性。

下面是一个父组件向子组件传递属性的例子：

<template>
  <div>
    <p>父组件的属性：{{ parentProp }}</p>
    <ChildComponent :childProp="parentProp" />
  </div>
</template>

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

const props = defineProps({
  parentProp: String,
});
</script>

在上面的例子中，我们首先使用`defineProps`来定义了一个名为`parentProp`的属性，并将其类型设置为字符串。然后，我们在模板代码中使用了这个属性，并通过`:childProp`的方式将其传递给了子组件。在子组件中，我们同样使用`defineProps`来定义了一个名为`childProp`的属性，并将其类型设置为字符串。这样，子组件就可以访问到父组件传递过来的属性了。

<template>
  <div>
    <p>子组件的属性：{{ childProp }}</p>
  </div>
</template>

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

const props = defineProps({
  childProp: String,
});
</script>

以上是一个简单的父传子示例，但是在实际开发中，我们可能需要更复杂的属性传递方式，比如父组件向子组件传递函数等。在这种情况下，我们可以使用`provide/inject`或者事件总线等方式来实现属性的传递。