vue,uni-app组件间的通讯(父子，兄弟组件间传值)
父组件给子组件传值
父组件通过v-bind绑定数据传递给子组件：
<template>
<view>
<son :msg="msg"></son>
</view>
</template>
<script>
import son from "@/components/son/son.vue"
export default {
data () {
return {
msg: 'hello,i am your father!'
}
},
components: {son}
}
</script>
子组件通过props来接受外界传递到组件内部的值：
<template>
<view>
{{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
子组件给父组件传值
通过点击事件触发 sendMsg 方法，在方法中利用 $emit 触发 myEvent 将 this.status 传递给父组件
<template>
<view>
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '想要传递给父组件的数据'
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
父组件定义自定义事件( myEvent )并接收参数
<template>
<view>
<son @myEvent="getMsg"></son>
子组件传递的值： {{res}}
</view>
</template>
<script>
import son from "@/components/son/son.vue"
export default {
data () {
return {
res: ''
}
},
methods: {
getMsg (res) {
this.res = res
}
},
components: {son}
}
</script>
兄弟组件间传值
兄弟A组件：
通过点击事件触发 addNum 方法，触发uni.$emit 定义的 updateNum 全局事件，将数据传递出去
<template>
<view>
这是a组件：<button @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
addNum () {
uni.$emit('updateNum',10)
}
}
}
</script>
兄弟B组件：
在组件生命周期函数 created() ，用 uni.$on 注册一个全局事件 updateNum 触发回调函数，将A组件传递的值渲染在页面上
<template>
<view>
这是b组件的数据:{{num}}
</view>
</template>
<script>
export default {
data() {
return {
num: 0
};
},
created(){
uni.$on('updateNum',num=>{
this.num=num
})
}
}
</script>
父组件：
import testA from '../../components/a.vue'
import testB from '../../components/b.vue'