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

Posted 2021-07-17 曹豆芽

今天豆芽在复习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>

🙏🏿🙏🏿🙏🏿🙏🏿