uni-app组件之间的通信方式

一时失言乱红尘 2021-07-24 23:15 728阅读 0赞

# 一 点睛 #

组件间传值包括下面三种情况：

*  父组件给子组件传值
 *  子组件给父组件传值
 *  兄弟组件通讯

# 二 代码 #

1 父组件 index.vue

<template>
    	<view class="content">
    		
    		
    		<test v-if="flag" :title="title" @myEvent="getNum"></test>
    		<button type="primary" @click="checkTest">切换test组件</button>
    		这是子组件传递过来的数据{
       {num}}
    		<testA></testA>
    		<testB></testB>
    	</view>
    </template>
    
    <script>
    	/* 引入组件 */
    	import test from '../../components/test.vue'
    	import testA from '../../components/a.vue'
    	import testB from '../../components/b.vue'
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				flag: true,
    				num:0
    			}
    		},
    		onLoad() {
    			console.log('页面加载了')
    		},
    		onShow() {
    			console.log('页面显示了')
    		},
    		onReady() {
    			console.log('页面初次渲染完成了')
    		},
    		onHide() {
    			console.log('页面隐藏了')
    		},
    		methods: {
    			checkTest() {
    				this.flag = !this.flag
    			},
    			// 4 子给父传参
    			getNum(num){
    				this.num = num
    				console.log(num)
    			}
    		},
    		// 组件组件
    		components: {
    			test: test,
    			testA:testA,
    			testB:testB
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

2 子组件 test.vue

<template>
    	<view id="myview">
    		这是test组件{
       {num}}
    		
    		这是父组件传递过来的数据{
       {title}}
    		
    		<button @click="sendNum">给父组件传值</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				num: 3,
    				intId: null
    			};
    		},
    		// 2 父给子传值-接参
    		props:['title'],
    		methods:{
    			sendNum(){
    				console.log('给父亲传值')
    				// 2 子给父传值
    				this.$emit('myEvent',this.num)
    			}
    		},
    		beforeCreate() {
    			console.log('实例已经开始初始化了,但数据还没初始化完成，页面也没开始渲染')
    			console.log(this.num)
    		},
    		created() {
    			// 在这个里面初始化数据
    			console.log('实例创建完成后被立即调用')
    			console.log(this.num)
    			// this.intId = setInterval(() => {
    			// 	console.log('执行定时器')
    			// }, 1000)
    		},
    		beforeMount() {
    			console.log('在挂载开始前被调用', document.getElementById('myview'))
    		},
    		mounted() {
    			// 在这个里面操作dom
    			console.log('挂载已完成', document.getElementById('myview'))
    		},
    		destroyed() {
    			console.log('组件销毁了')
    			// 清空定时器
    			clearInterval(this.intId)
    		}
    	}
    </script>
    
    <style>
    
    </style>

3 兄弟组件 a.vue

<template>
    	<view>
    		这是a组件
    		
    		<button @click="addNum">修改b组件的数据</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			};
    		},
    		methods:{
    			addNum(){
    				// 2 兄弟组件传值
    				uni.$emit('updateNum',10)
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

4 兄弟组件 b.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>

# 三 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/58e9e7b2d1354a65af0f80514d936290.png