用vue3实现两个组件相互传递数据
时间: 2024-03-09 18:18:41 浏览: 16
在 Vue3 中,可以使用 `props` 和 `emit` 来实现父子组件之间的数据传递。
首先在父组件中定义一个子组件并传递数据:
```javascript
<template>
<div>
<child-component :message="message" @update-message="updateMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello World',
};
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
},
},
};
</script>
```
在上面的代码中,我们在 `ChildComponent` 上绑定了一个 `message` 属性,并通过 `@update-message` 监听子组件的事件。当子组件触发 `updateMessage` 事件时,将会调用 `updateMessage` 方法更新 `message` 属性。
然后在子组件中,我们可以通过 `props` 来接收父组件传递的数据,并通过 `emit` 来触发父组件的事件:
```javascript
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: {
message: String,
},
methods: {
updateMessage() {
const newMessage = 'Hello Vue3';
this.$emit('update-message', newMessage);
},
},
};
</script>
```
在上面的代码中,我们首先通过 `props` 接收了父组件传递的 `message` 属性,并在模板中显示。然后当用户点击按钮时,我们触发了一个 `updateMessage` 方法,并通过 `$emit` 触发了一个名为 `update-message` 的事件,并传递了新的消息作为参数。
这样就完成了父子组件之间的数据传递。