vue兄弟组件之间传值
时间: 2023-10-12 14:20:35 浏览: 28
在 Vue 中,父组件可以通过 props 向子组件传递数据,而子组件可以通过 $emit 触发一个自定义事件来向父组件传递数据。但是,兄弟组件之间传值需要使用一个共同的父组件来作为中介来传递数据,或者可以使用 Vuex 状态管理来管理兄弟组件之间的共享状态。以下是一个使用父组件来传递数据的示例:
1. 创建一个父组件并将需要传递的数据作为 props 传递给两个子组件:
```
<template>
<div>
<child-component-1 :data="sharedData"></child-component-1>
<child-component-2 :data="sharedData"></child-component-2>
</div>
</template>
<script>
export default {
data() {
return {
sharedData: 'Hello from parent component'
}
}
}
</script>
```
2. 在子组件中通过 props 接收父组件传递的数据:
```
<template>
<div>
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
props: ['data']
}
</script>
```
这样,两个子组件就可以通过 props 共享父组件中的数据了。当一个子组件修改了数据时,另一个子组件也会跟着更新。
希望能帮到你!