学习笔记（7）父子组件之间传值

谁践踏了优雅 2023-05-21 08:43 19阅读 0赞

#### 组件的通讯 ####

##### 父组件给子组件传值 #####

子组件通过`props`来接受外界传递到组件内部的值  
`props: ['msg']`

<template>
    	<view>
    		这是一个自定义组件 {
       {msg}}
    	</view>
    </template>
    
    <script>
    	export default {
    		props: ['msg']
    	}
    </script>
    
    <style>
    </style>

其他组件在使用子组件的时候传递值

1.引入 `import test from "@/components/test/test.vue"`  
2.注册 `components: {test}`  
3.使用 `<test :msg="msg"></test>`

<template>
    	<view>
    		<test :msg="msg"></test>
    	</view>
    </template>
    
    <script>
    	import test from "@/components/test/test.vue"
    	export default {
    		data () {
    			return {
    				msg: 'hello'
    			}
    		},
    		
    		components: {test}
    	}
    </script>

##### 子组件给父组件传值 #####

子组件通过sendMsg()方法，$emit触发事件触发`myEvent()`方法传递参数  
父组件<test :msg=“msg” @`myEvent`=“getMsg”> ，父组件执行getMsg(),获取参数。

<template>
    	<view>
    		这是一个自定义组件 {
       {msg}}
    		<button type="primary" @click="sendMsg">给父组件传值</button>
    	</view>
    </template>
    
    <script> export default { data () { return { status: '打篮球' } }, props: { msg: { type: String, value: '' } }, methods: { sendMsg () { this.$emit('myEvent',this.status) } } } </script>

父组件定义自定义事件并接收参数

<template>
    	<view>
    		<test :msg="msg" @myEvent="getMsg"></test>
    	</view>
    </template>
    <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, methods: { getMsg (res) { console.log(res) } }, components: { test} } </script>

子组件向父组件传值是文本框时候，不用@Click 应更换为 @input

#### 兄弟组件通信 ####

1.`uni.$emit(eventName,OBJECT)`  
触发`全局`的自定事件。附加参数都会传给监听器回调。c  
代码示例:  
`uni.$emit('update',{msg:'页面更新'})`

2.`uni.$on(eventName,callback)`

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

代码示例

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

组件A

<template>
    	<view>
    		这是组件b的数据：{ { num}}
    	</view>
    </template>
    
    <script>
    	export default { 
    		data () { 
    			return { 
    				num : 0
    			};
    	},
    	
    	created() { 
    		//监听全局自定义事件udpdateNum，由$emit触发
    		uni.$on('upadteNum',num =>{ 
    			this.num+= num;
    		})
    		
    	}
    	
    	}
    	
    </script>
    
    <style>
    	
    </style>

组件B

<template>
    	<view>
    		这是组件a：<button @click="addNum">修改b组件中的数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data () { 
    			return { 
    				
    			};
    	},
    	
    	methods:{ 
    		addNum (){ 
    		//触发全局事件
    			uni.$emit('updateNum',10)
    		}
    	}
    	
    	}
    	
    </script>
    
    <style>
    	
    </style>

在页面中引入组件a，组件b，并使用，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20230521/39af57cd931c4bb3ba8abf4886112069.png