# Vue2组件通信 ## props ### 父传子 :boom:利用props属性，由父组件传递给子组件，子组件收到的数据不能修改，不然会报错 ```js ++++++++++++++++++++++++++++++ ``` ## $emit ### 子传父 :boom:在父组件总个子组件身上绑定一个事件，子组件通过this.$emit('父组件给绑定的事件名',传给父组件的数据)调用父组件给绑定的事件将数据作为参数传递给父组件 ```js +++++++++++++++++++ ``` ## $parent/$children ### 父子互通 :boom:通过$parent和$children就可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data。(官方更推荐 props和events的传递方法) :boom:要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象 ```js ++++++++++++++++++++++++++ ``` ## provide/inject ### 父传子孙 :boom:祖先元素通过provide选项提供变量，子孙元素可以通过inject选项获取祖先元素提供的变量数据（这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据） ```js //祖先 +++++++++++++++++++++++++ //子组件 +++++++++++++++++++++++++++ //孙组件 ``` ## ref/refs ### 父传子 :boom:ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据 ```vue +++++++++++++++++++++++++ ``` ## eventBus ### 任意组件通信 :boom:思路：先创建出一个事件总局（eventBus），相当于第三方，所有组件都可以来这里存放事件，所有组件都可以来这里调用存放在这里的任何组件（不管是不是自己存放的事件） :boom:缺点：当多个组件间需要共享数据时，事件的存放和调用就会显得很多，特别是过了一段时间再来维护项目时，很多事件你都不知道是在哪里提出又是在哪里调用的，不好维护 :o:创建事件总局 1. 做成模块，要使用的时候导入(较好) ```js import Vue from 'vue' const eventBus = new Vue(); export default eventBus; ``` 2. 直接将唯一的Vue实例绑定在Vue的原型上，通过this.$eventBus调用 ```js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ beforeCreate(){ Vue.prototype.$eventBus = this }, render: h => h(App) }).$mount('#app') ``` :boom:以下用第一种创建总局方式实现兄弟间的通信示例 ```js ++++++++++++++++++ +++++++++++++++++++ ``` ## vuex ### 任意组件通信 :o:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。详情看Vuex篇 ```js //store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { homeData:'' }, mutations: { SetHomeData(state,data){ state.homeData = data } }, }) ``` 下面为兄弟组件通信 ```js ++++++++++++++++++++++++++++++ ``` ## localStorage/sessionStorage ### 任意组件 :boom:利用window.localStorage.setItem('key',value)和window.localStorage.getItem('key')可以达到存储数据的目的，和eventBus差不多都是一个第三方中介，缺点容易混乱，可以配合vuex使用可以做数据持久化，需要注意的是存的时候需要将对象转化成JSON格式，取出再转化为对象。 ```js let obj = { name: 'zhangsan', age: 23 } window.localStorage.setItem('zhangsan',JSON.stringify(obj)) console.log(JSON.parse(window.localStorage.getItem('zhangsan'))) ``` ## inheritAttrs/$attrs ### 父传子孙 :boom:$attrs,捡漏对象，当父组件传过来的变量，子组件中没有用 props 接收时都会被它所接收，this.$attrs 可访问，插槽也是，但父组件传过来HTML结构而子组件没有用 solt 坑位接收时，会被 $solts捡漏，this.$solts可捡漏 :boom:默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。示例： ```js ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++ ``` # Vue3组件通信 :boom:[详情请看官方文档的组件基础和组件深入](https://cn.vuejs.org/guide/essentials/component-basics.html#listening-to-events) ## 父传子 ### props ```js ``` ### provide/inject :boom:祖先元素可以向所有后代元素传递信息 ```vue ``` ### attrs :boom: 父元素绑定在子组件身上的所有属性和事件，除了class和style和背子组件用props接收的外，其他的都可以用 attrs 接收到。如果子组件模板中只有一个根元素，又没有用props和emit接收，那就会穿透绑定到该根元素上，如果该子组件不止一个根元素，则会发出警告 ```js ``` ## 子传父 ### emit ```js ``` ### expose/ref [详情](https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component) ```js ``` ## 任意组件通信 ### mitt :boom:因为vue3没有了eventBus，所以有叫mitt的包代替先安装 npm i mitt -S ```js import mitt from 'mitt' const mymitt = mitt() export default mymitt ``` ```js ``` ### pinia :boom:相当于Vuex5.0，去除了mutation，只有 state、getters、actions :boom: npm i pinia ```js // main.ts import { createPinia } from 'pinia' const pinia = createPinia() app.use(pinia) ``` ```js // parentStore.js import { defineStore } from "pinia"; export const useParentStore = defineStore('parent',{ state: () => { return{ message1: 'child1', message2: 'child2' } }, getters:{ getMes1(state){ return '我来自parentStore ' + state.message1 }, getMes2(state){ return '我来自parentStore ' + state.message2 } }, actions:{ updateMessage1(tartget:any){ console.log(tartget) this.message1 = tartget }, updateMessage2(tartget:any){ this.message2 = tartget } } }) ``` ```js ``` ```js ```

我是子组件home：{{data}}

我是home组件的子组件about：{{data}}

我是子组件home

我是home组件,后面是我从事件总局home兄弟组件存放的事件总获取的数据: {{data}}