vue3 给子组件传值
时间: 2023-11-25 17:52:30 浏览: 49
在Vue3中,可以通过props来给子组件传值。具体步骤如下:
1.在父组件中定义一个变量,将需要传递给子组件的值赋给该变量。
2.在子组件中通过props接收该变量。
3.在子组件中使用该变量。
下面是一个示例代码:
父组件代码:
```vue
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default defineComponent({
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent component'
}
}
})
</script>
```
子组件代码:
```vue
<template>
<div>
{{ message }}
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ChildComponent',
props: {
message: {
type: String,
required: true
}
}
})
</script>
```
在上面的代码中,父组件通过`:message="parentMessage"`将`parentMessage`变量的值传递给了子组件。子组件通过`props`接收了该变量,并在模板中使用了它。