uni-app 兄弟组件如何传值(uni.$on 和 uni.$emit)
这里使用的是 uni.$on 和 uni.$emit个人理解 类似于vue中的全局事件总线test 组件<template><view class="myTest"><view>标题:test组件</view><button type="primary" size="mini" @click="addNum()">修改 组件2 的数据&l
·
这里使用的是 uni.$on 和 uni.$emit
个人理解 类似于vue中的全局事件总线
test 组件
<template>
<view class="myTest">
<view>标题:test组件</view>
<button type="primary" size="mini" @click="addNum()">修改 组件2 的数据</button>
</view>
</template>
<script>
export default {
data(){
return {
num:3
}
},
methods:{
// 触发自定义事件
addNum(){
uni.$emit("updateNum",10)
}
}
}
</script>
<style>
.myTest{
margin-top: 30rpx;
border:5rpx solid #000000;
padding: 10rpx;
}
</style>
test2 组件
<template>
<view class="myTest2">
组件2
<view>这是2 组件的数据 {{num}}</view>
</view>
</template>
<script>
export default {
data(){
return {
num:0
}
},
// 组件被初始化创建之后
created() {
// 自定义事件回调
uni.$on("updateNum",(num)=>{
this.num = this.num + num
})
}
}
</script>
<style>
.myTest2{
margin-top: 30rpx;
border: 5rpx solid #007AFF;
padding: 10rpx;
}
</style>
结果 :
更多推荐
已为社区贡献13条内容
所有评论(0)