uni-app 组件之间的通讯

字组件给父组件传值

• 第一种:props。可参考

• 第二种:自定义事件传值。可参考

---

若组件与组件之间是平级关系

在Vue中给出的是全局事件总线这个开发思路。

在uni-app中有一个页面通讯 - uni-app官网 (dcloud.io)

uni.$emit(eventName,OBJECT)

触发全局的自定事件。附加参数都会传给监听器回调。

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

代码示例

    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

代码示例

    uni.$on('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

代码示例

    uni.$once('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性	类型	描述
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的组件详情请看