vue3中父组件向子组件传值
时间: 2024-10-09 08:13:29 浏览: 59
在Vue 3中,父组件向子组件传递值主要有两种常见的方法:
1. **props** (属性):这是最常用的父组件向子组件传递数据的方式。父组件通过`props`属性将数据作为参数传递给子组件,并声明子组件需要接收哪些属性。例如:
```javascript
// 父组件
<template>
<child-component :message="parentMessage" />
</template>
<script>
export default {
data() {
return { parentMessage: 'Hello from parent' };
},
};
</script>
```
在子组件中,通过`:`前缀(即v-bind或单冒号绑定)来接收并使用这个值:
```vue
// 子组件 ChildComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
```
2. **自定义事件** (emit): 如果你需要双向数据绑定或需要从子组件触发回调,可以使用自定义事件`@emit`。比如:
```javascript
// 父组件
<template>
<button @click="changeMessage">Change Message</button>
<child-component :message="parentMessage" @updateMessage="handleUpdateMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleUpdateMessage(newMessage) {
this.parentMessage = newMessage;
},
changeMessage() {
this.$refs.childComponent.postMessage('New message from parent');
}
},
};
</script>
```
子组件接收到事件后,通常会调用自己的方法处理并触发`updateMessage`事件:
```vue
// 子组件 ChildComponent.vue
<template>
<button @click="$emit('updateMessage', 'From child')">
Click me
</button>
</template>
```
阅读全文