字组件给父组件传值
若组件与组件之间是平级关系
在Vue中给出的是全局事件总线这个开发思路。
触发全局的自定事件。附加参数都会传给监听器回调。
| 属性 | 类型 | 描述 |
|---|
| eventName | String | 事件名 | | OBJECT | Object | 触发事件携带的附加参数 |
代码示例
uni.$emit('update',{msg:'页面更新'})
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
| 属性 | 类型 | 描述 |
|---|
| eventName | String | 事件名 | | callback | Function | 事件的回调函数 |
代码示例
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
| 属性 | 类型 | 描述 |
|---|
| eventName | String | 事件名 | | callback | Function | 事件的回调函数 |
代码示例
uni.$once('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
移除全局自定义事件监听器。
| 属性 | 类型 | 描述 |
|---|
| eventName | Array＜String＞ | 事件名 | | callback | Function | 事件的回调函数 |
Tips
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
组件与组件之间的通讯
b.vue
created(){
uni.$on('updateNum',num1=>{
this.num+=num1
})
}
触发$on事件的时候是会传递一些数据的
a.vue
<template>
<div>
<h2>这是a组件里的值:{{num}}</h2>
<button type="primary" size="mini" @click="cdB">给B组件传值</button>
<button type="primary" size="mini" @click="gotoNavi">这里跳回'navigateor'</button>
<button type="primary" size="mini" @click="gotoB">这里跳到'b'组件</button>
</div>
</template>
<script>
export default{
name:'a',
components:{},
data() {
return {
num: 10
}
},
methods: {
gotoNavi(){
uni.navigateTo({
url:'/pages/navigator_learn/navigator_learn'
})
},
gotoB(){
uni.navigateTo({
url: '/pages/components/b'
})
},
cdB(){
uni.$emit('updateNum',10)
}
},
}
</script>
<style scoped>
</style>
注意：我这里的使用到了uni中的导航跳转。你在同一个界面中你的b值是在刷新，但是你点击了给B组件传值的按键再按下这里跳到'b'组件跳到b组件，发现你的B值还是0,你的b.vue可以加个:
created(){
uni.$on('updateNum',(num)=>{
console.log(this.num)
console.log(num)
this.num = this.num + num
})
}
发现this.num值一直在a组件传过来的+10而回调里面的num一直都是10；当你返回后，发现b的值已经变了；说明你在跳转的时候用uni.navigateTo都是一个新的页面，若你在跳转前杀掉(uni.redirectTo)全部的a和b组件,那就永远禁止
若是a组件用redirectTo，b组件用navigateTo, 跟a、b组件全都用redirectTo一个效果
若是a组件用navigateTo，b组件用redirectTo也是不行
这里的结论就是要么都用navigateTo然后一直返回;要么就不用导航跳转，直接给父组件
你可以在index.vue(首页)里面不用导航跳转直接引入a,b俩组件(因为与原有的a标签重复，所以取名为(A、B)):
index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view>
<text class="title">{{title}}</text>
</view>
<A></A><!--把A组件放在容器中-->
<B></B><!--把B组件放在容器中-->
</view>
</template>
<script>
import A from '../components/a.vue'//引入a组件
import B from '../components/b.vue'//引入b组件
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
},
components:{A,B}//注册a、b组件
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 200rpx auto 50rpx auto;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
怎么配置Vue的组件详情请看
|