丁鹿学堂：vue3的组件通信方式总结笔记（下）refs的方式传参在vue2的时候，使用的是选项式API，我们可以通过t

refs的方式传参

在vue2的时候，使用的是选项式API，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用这种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

vue3需要借助生命周期方法，原因很简单，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素

letbox=ref(null); 这个box要和ref绑定的是同一个名字。

<template>
  <div ref='box'>I am DIV</div>
</template>
<script>
import {ref,onMounted}
let box = ref(null);
onMounted(()=>{
  console.log(box.value)
});
</script>

provide和inject

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。在vue2中也有这样的应用，他通常是用来自己封装UI组件的时候会用到。

<script setup>
import { ref, provide } from 'vue'
import son from './components/son.vue'
const faData = ref(123)
provide('faDataProvide',faData.value)
</script>

子组件使用

<template>
  <div>
     子组件获取注入数据:{{faDataProvide}}
  </div>
</template>
<script setup>
import {ref,inject } from 'vue'
let faDataProvide = inject('faDataProvide')
</script>

事件总线

Vue3中移除了事件总线，但是可以借助于第三方工具来完成，Vue官方推荐mitt或tiny-emitter 但是事件总线不利于维护。我们有个了解就行了，官方都不怎么支持了，为什么还要用呢？

状态管理工具

Vuex和Pinia是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信， Pinia是Vue.js的轻量级状态管理库,比起vue3中的Vuex状态管理,pinia更轻量，也是vue3官方更为推荐的。我们这里先有个大概的印象，回头会专门写文来介绍。