uniapp - 组件之间的通讯方式

Bertha 。 2021-07-25 14:36 523阅读 0赞

### 组件之间的通讯方式 ###

*  一. 父组件给子组件传值
 *  二. 子组件给父组件传值
 *  三. 兄弟组件通讯
 *  四. 全局共享数据
 *   *  1. 通过Vue的原型共享数据
     *  2. 通过globalData共享数据

> uniapp 组件通讯和 Vue 相同。  
> 详细内容请查看 uniapp 官网：[https://uniapp.dcloud.io/collocation/frame/communication][https_uniapp.dcloud.io_collocation_frame_communication]

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

**父组件：** 通过 `v-bind` 绑定向子组件传递值

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

**子组件：** 通过 `prop` 接收父组件传递过来的值

<template>
    	<view>父组件传递过来的数据：{
       {text}}</view>
    </template>
    
    <script> export default { // 接收父组件传递过来的值 props:['text'], data(){ return{ } }, } </script>
    
    <style> </style>

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

**子组件：** 通过 `$emit` 自定义事件向父组件传递参数

<template>
    	<button @click="sendData">向父组件传值</button>
    </template>
    
    <script> export default { data(){ return{ text:'hello' } }, methods:{ // 通过 $emit 自定义事件向父组件传递参数 sendData(){ this.$emit("event",this.text) } } } </script>
    
    <style> </style>

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

<template>
    	<view>
    		<view>接收子组件传递回来的值：{
       {text}}</view>
    		
    		<test @event="getData"></test>
    	</view>
    </template>
    
    <script> import test from '../../component/test.vue' export default { components: { test }, data() { return { text:'' } }, methods:{ getData(v){ //接收子组件传递回来的值 console.log(v) this.text=v } } } </script>
    
    <style> </style>

# 三. 兄弟组件通讯 #

**父组件：** 创建使用组件

<template>
    	<view>
    		<child-one></child-one>
    		<child-two></child-two>
    	</view>
    </template>
    
    <script> import childOne from '../../component/childOne.vue' import childTwo from '../../component/childTwo.vue' export default { components:{ 'child-one':childOne, 'child-two':childTwo }, data(){ return{ } } } </script>
    
    <style> </style>

**第一个子组件：** 通过 `uni.$on(eventName,callback)` 监听全局的自定义事件，事件可以由 `uni.$emit` 触发，回调函数会接收所有传入事件触发函数的额外参数。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eventName</td> 
   <td>String</td> 
   <td>事件名</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>Function</td> 
   <td>事件的回调函数</td> 
  </tr> 
 </tbody> 
</table>

<template>
    	<view class="child-two">第一个组件的数据：{
       {text}}</view>
    </template>
    
    <script> export default { data() { return { text: '原数据' } }, // 实例创建完成，调用 uni.$on() 方法 created() { // uni.$on(事件名，事件的回调函数) uni.$on('updateData', (v) => { this.text = v }) } } </script>
    
    <style> .child-two { background-color: #4CD964; height: 300rpx; } </style>

**第二个子组件：** 通过 `uni.$emit(eventName,OBJECT)` 触发全局的自定事件。附加参数都会传给监听器回调。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eventName</td> 
   <td>String</td> 
   <td>事件名</td> 
  </tr> 
  <tr> 
   <td>OBJECT</td> 
   <td>Object</td> 
   <td>触发事件携带的附加参数</td> 
  </tr> 
 </tbody> 
</table>

<template>
    	<view class="child-one">
    		这是第二个组件
    		<button @click="updateTwoCom">修改第一个组件的数据</button>
    	</view>
    </template>
    
    <script> export default { data(){ return{ } }, methods:{ updateTwoCom(){ /** * 通过 `uni.$emit(eventName,OBJECT)` 触发全局的自定事件 * uni.$emit(uni.$on的事件名,触发事件携带的附加参数) */ uni.$emit('updateData',"更新的数据") } } } </script>
    
    <style> .child-one{ background-color: #007AFF; height: 300rpx; } </style>

# 四. 全局共享数据 #

## 1. 通过Vue的原型共享数据 ##

**定义数据：**  
在 `main.js` 中，通过Vue原型定义一个数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]  
**页面中获取数据：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]  
**更改 Vue原型 中的数据：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]

## 2. 通过globalData共享数据 ##

**定义数据：**  
在`App.vue`中定义globalData数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]  
**页面中获取数据：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]  
**更改 globalData 中的数据：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]

[https_uniapp.dcloud.io_collocation_frame_communication]: https://uniapp.dcloud.io/collocation/frame/communication
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/42de5612ba6548b8bdd84e7526ea08e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/a25770b0c55a4fb69daafe599aad8272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/3b358dc702ac4c42a4707b55cc46847c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/a2a9d260d15a49bcb1bce4fc2e141b28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/263696110b5245b89b70cbc2caa1f4d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/f8c4114f8b0c49bd9a33545d4ac097aa.png