组件之间的通信方式

一、缓存

可以将数据存储到本地缓存中，在需要的时候从缓存中取出即可。

1.localStorage和sessionStorage

1、localStorage存储的数据会一直在浏览器本地存储，除非手动清除
2、sessionStorage存储的数据在浏览器关闭后就会清除。
3、localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换。

2.API

1、保存数据：localStorage.setItem(key,value)
2、读取数据：localStorage.getItem(key)
3、删除单个数据：localStorage.removeItem(key)
4、删除所有数据：localStorage.clear()
5、获取某个索引的key值：localStorage.key(index)

二、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态。
作用：
1、进行统一的状态管理，解决不同组件共享数据的问题。
2、不同视图需要变更同一状态的问题。

三、父传子

父组件
在引用子组件的标签里利用自定义属性传值

//在父组件中
data: {
  	toSon:'传给子组件',
}
//子标签
<son :data="toSon"></son>

子组件中
利用props接收数据

//props和data同级
props:{
        //data:String,
        // 或者设置默认值
        data:{
          type:[Number,String],
          default:"默认值"
        },
      },

四、子传父

父组件
在父组件中自定义事件接收数据

//在父组件中
methods: {
  	formSon(data){
  		console.log(data)  //data即传来的数据
  	}
}
//子标签
<son @fromSon1="fromSon"></son>

子组件
触发$emit传递数据

//可以在生命周期中触发或者设置点击事件触发
created(){
	this.$emit('fromSon1',"传到父组件");
}

五、ref

ref获取元素
利用ref函数获取组件中的标签元素，并且可以使用该标签元素的属性和方法

//例如: 让输入框自动获取焦点
<template>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
/* 
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default {
  setup() {
    //声明一个 ref 来存放该元素的引用
		//必须和模板里的 ref 同名
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>

六、事件总线

事件总线像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。事件总线多用于兄弟组件的通信。
触发事件
在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。

 uni.$emit('update',{msg:'页面更新'})

监听事件
uni.$on(eventName,callback)

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

uni.$on('update',function(data){
    console.log('参数 msg 为：' + data.msg);
})

只监听一次

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

  uni.$once('update',function(data){
        console.log('参数 msg 为：' + data.msg);
    })

移除监听
uni.$off([eventName, callback])

移除全局自定义事件监听器。
注意事项
1、如果没有提供参数，则移除所有的事件监听器；
2、如果只提供了事件，则移除该事件所有的监听器；
3、如果同时提供了事件与回调，则只移除这个回调的监听器；
4、提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；