再vue3,<script setup lang="ts">标签中,完成父页面给子页面传值
时间: 2024-05-01 12:16:35 浏览: 12
在Vue3中,可以使用`props`属性来实现父组件向子组件传递值。具体步骤如下:
1. 在子组件中定义`props`属性,用于接收父组件传递的值。
```typescript
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
prop1: String,
prop2: {
type: Number,
default: 0
}
});
</script>
```
2. 在父组件中使用子组件时,通过在子组件标签中添加`v-bind`指令将数据传递给子组件。
```html
<template>
<div>
<child-component v-bind:prop1="parentProp1" v-bind:prop2="parentProp2"></child-component>
</div>
</template>
<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
const parentProp1 = 'Hello, child component!';
const parentProp2 = 123;
</script>
```
在上述示例中,父组件通过`v-bind`指令将`parentProp1`和`parentProp2`传递给子组件`ChildComponent`。子组件接收到这些值后,可以在组件中使用`props.prop1`和`props.prop2`来获取这些值。