组件的通讯
父组件给子组件传值
子组件通过props
来接受外界传递到组件内部的值
props: ['msg']
<template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
其他组件在使用子组件的时候传递值
1.引入 import test from "@/components/test/test.vue"
2.注册 components: {test}
3.使用 <test :msg="msg"></test>
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
子组件给父组件传值
子组件通过sendMsg()方法,$emit触发事件触发myEvent()
方法传递参数
父组件<test :msg=“msg” @myEvent
=“getMsg”> ,父组件执行getMsg(),获取参数。
<template>
<view>
这是一个自定义组件 {{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
父组件定义自定义事件并接收参数
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
子组件向父组件传值是文本框时候,不用@Click 应更换为 @input
兄弟组件通信
1.uni.$emit(eventName,OBJECT)
触发全局
的自定事件。附加参数都会传给监听器回调。c
代码示例:
uni.$emit('update',{msg:'页面更新'})
2.uni.$on(eventName,callback)
监听全局
的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
代码示例
uni.$on('update',function(data) {
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
组件A
<template>
<view>
这是组件b的数据:{{num}}
</view>
</template>
<script>
export default {
data () {
return {
num : 0
};
},
created() {
//监听全局自定义事件udpdateNum,由$emit触发
uni.$on('upadteNum',num =>{
this.num+= num;
})
}
}
</script>
<style>
</style>
组件B
<template>
<view>
这是组件a:<button @click="addNum">修改b组件中的数据</button>
</view>
</template>
<script>
export default {
data () {
return {
};
},
methods:{
addNum (){
//触发全局事件
uni.$emit('updateNum',10)
}
}
}
</script>
<style>
</style>
在页面中引入组件a,组件b,并使用,效果图如下: