uniapp的vue2子类之间传值
时间: 2024-01-17 20:03:44 浏览: 27
在 Vue 中,子组件向父组件传递数据是通过事件触发的。而如果子组件之间需要传递数据,则可以使用两种方式:props 和 event bus。
1. 使用 props
在父组件中通过 props 将数据传递给子组件,子组件通过 $emit 触发事件将数据传递回父组件,其他子组件可以通过 props 接收到传递的数据。
示例代码:
// 父组件
<template>
<div>
<child1 :parentData="parentData" @child1Data="handleChild1Data"/>
<child2 :parentData="parentData" @child2Data="handleChild2Data"/>
</div>
</template>
<script>
export default {
data() {
return {
parentData: 'hello world'
}
},
methods: {
handleChild1Data(data) {
console.log('child1 data:', data)
},
handleChild2Data(data) {
console.log('child2 data:', data)
}
}
}
</script>
// 子组件1
<template>
<div>
<p>子组件1:{{ parentData }}</p>
<button @click="$emit('child1Data', 'child1 send data')">发送数据</button>
</div>
</template>
<script>
export default {
props: {
parentData: String
}
}
</script>
// 子组件2
<template>
<div>
<p>子组件2:{{ parentData }}</p>
<button @click="$emit('child2Data', 'child2 send data')">发送数据</button>
</div>
</template>
<script>
export default {
props: {
parentData: String
}
}
</script>
2. 使用 event bus
event bus 是一种用于组件通信的模式,它通过创建一个空的 Vue 实例作为中央事件总线,用于在组件之间传递事件和数据。
示例代码:
// event bus
import Vue from 'vue'
export const bus = new Vue()
// 子组件1
<template>
<div>
<p>子组件1:{{ child1Data }}</p>
<button @click="handleClick">发送数据</button>
</div>
</template>
<script>
import { bus } from './event-bus'
export default {
data() {
return {
child1Data: ''
}
},
methods: {
handleClick() {
this.child1Data = 'child1 send data'
bus.$emit('child1Data', this.child1Data)
}
}
}
</script>
// 子组件2
<template>
<div>
<p>子组件2:{{ child2Data }}</p>
</div>
</template>
<script>
import { bus } from './event-bus'
export default {
data() {
return {
child2Data: ''
}
},
mounted() {
bus.$on('child1Data', data => {
console.log('receive data:', data)
this.child2Data = data
})
}
}
</script>