uniapp 子组件如何向父组件传递数组?不通过点击函数,可通过全局监听事件,在页面加载时自动获取子组件数组的数据,求例子
<!-- 父组件 -->
<template>
<view>
<son @sonEven='getSonText'></son>
</view>
</template>
<script>
import son from '@/uni_modules/Cloud-API/components/Cloud-API/Cloud-API.vue'
export default {
data() {
return {
array: []
}
},
methods: {
getSonText(array1) {
this.array = array1
}
},
components: {
son
}
}
</script>
<!-- 子组件 -->
<template>
<view>
<!-- 向父组件传值 -->
<button @click="toFather">点击向父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
array: [1, 2, 3, 4]
}
},
methods: {
toFather() {
this.$emit('sonEven', this.array)
}
}
}
</script>
全局监听事件不太清晰,不知道什么原因
不通过点击函数,可全局监听事件在页面加载时自动获取数组
<!-- 子组件 -->
<template>
<view>
<!-- 向父组件传值 -->
<button>点击向父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
array: [1, 2, 3, 4]
}
},
methods: {
}
}
</script>
<!-- 父组件 -->
<template>
<view @click="test">
<son ref="procedureEdit"></son>
</view>
</template>
<script>
import son from './son.vue'
export default {
data() {
return {
array: []
}
},
mounted() {
this.array=this.$refs.procedureEdit.$data.array
},
methods: {
test(){
console.log(this.array)
}
},
components: {
son
}
}
</script>
你说的全局监听事件是指$emit吗,$emit是最适合做这个事的,你需要向父组件传递数据,那么你就得通知父组件,在vue中,$emit就是干这个的。至于你这里无法触发,是因为你在足尖上绑定的是@sonEven
,你应该绑定为@son-even
,因为vue会把横线转驼峰,同理,$emit的时候会把驼峰转横线,所以就没找到对应的事件。
// 子组件 生命周期 中设置一下
mounted() {
this.toFather()
},
代码没啥问题