uni-app父子通讯，跨页面跨组件通讯

Posted 2022-10-29 曹豆芽

今天豆芽在复习uni-app也是复习了下uni-app父子通讯，跨页面、跨组件通讯.

uni-app父子通讯

父向子通讯

//index.vue
<template>
	<view class="content">
		<testa :dataStr="dataStr"></testa>
	</view>
</template>

<script>
	import testa from '../../components/testa.vue'
	export default 
		data() 
			return 
				dataStr:'好东西'
			
		,
		components:
			testa
		,
		onLoad() ,
		methods: 
		
	
</script>

<style>
</style>

//testa.vue
<template>
	<view>
		豆芽给的dataStr
	</view>
</template>

<script>
	export default 
		data()
			return 
				
			
		,
		methods:
			
		,
		props:
			dataStr:
				type:String
			
		
	
</script>

<style>
</style>

子传父通讯

//testa.vue
<template>
	<view>
		豆芽给的dataStr
	</view>
</template>

<script>
	export default 
		data()
			return 
				
			
		,
		methods:
			
		,
		created() 
			this.$emit('data','豆芽儿子给的')
		,
		props:
			dataStr:
				type:String
			
		
	
</script>

<style>
</style>

//index.vue
<template>
	<view class="content">
		<testa :dataStr="dataStr" @data="data"></testa>
	</view>
</template>

<script>
	import testa from '../../components/testa.vue'
	export default 
		data() 
			return 
				dataStr:'好东西',
				resData:""
			
		,
		components:
			testa
		,
		onLoad() ,
		methods: 
			data(res)
				console.log(res)
			
		
	
</script>

<style>
</style>

uni-app跨页面、跨组件通讯

//index.vue
<template>
	<view class="content">
		<testa></testa>
		<testb></testb>
	</view>
</template>

<script>
	import testa from '../../components/testa.vue'
	import testb from '../../components/testb.vue'
	export default 
		data() 
			return 
				userList: 
			
		,
		components:
			testa,
			testb
		,
		onLoad() ,
		methods: 
			addNum() 
				uni.$emit('updateNum', 10)
			
		
	
</script>

<style>
</style>

//testa.vue
<template>
	<view>
		这是a组件 ：<button @click="addNum">修改b组件的数据num</button>
	</view>
</template>

<script>
	export default 
		data()
			return 
				num:0
			
		,
		methods:
			addNum()
				uni.$emit('updateNum',10)
			
		
	
</script>

<style>
</style>

//testb.vue
<template>
	<view>
		b新建的数据num
	</view>
</template>

<script>
	export default 
		data()
			return 
				num:0
			
		,
		created() 
			uni.$on('updateNum',(num)=>
				this.num += num;
			)
		
	
</script>

<style>
</style>

🙏🏿🙏🏿🙏🏿🙏🏿