vue组件通信（传值）

vue组件通信有以下几种方式可以实现（个人总结）

一、父组件到子组件传值方式：

        一般通过在父组件中给子组件绑定属性的方式进行传值，子组件通过props来接收。

实例：

//父组件
<template>
  <div>
    <Hello-world :text="text"></Hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  data() {
    return {
      text: '你好',
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

 子组件接收

//子组件
<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: {
      // 类型
      type: String,
      // 默认值
      default: 'text',
      // 是否为必传
      required: true,
    },
  },
</script>

二、子组件向父组件传值：

        父组件中给子组件绑定自定义事件，在子组件中通过$emit触发自定义事件，并且给自定义事件传递数据，父组件可以在自定义事件的形参中拿到数据，从而实现子组件向父组件通信。

三、Vuex

        Vuex是基于vue状态管理的库，它采用集中式存储管理应用的所有组件的状态。

优点和作用：

         可以实现组件数据共享，同时vuex中的数据也是响应式的，操作vuex数据远比组件内传值要方便很多，方便维护和管理。

vuex的5个属性：

        state: 用来存储和定义数据，如果在组件中需要访问state中的数据，可以通过$store.state访问。

        mutations:是修改state中数据的唯一方式，虽然可以直接修改state中的数据，但是很不建议，需要通过commit提交mutstions，通过mutations中的方法对state的数据进行修改。

        actions: 主要是用来处理异步代码，mutations只能处理同步代码，并且actions只能处理异步代码，不能修改state中的数据，如果想修改数据，需要通过actions方法中的形参context中的commit提交mutations，通过mutations修改代码。

        getters: 基于state进行派生数据。

        moudles: 将vuex数据进行模块化,方便维护,划分模块,每个模块中都拥有state/actions/mutaions/getters,每个模块可以设置命名空间,如果不设置,实际mutations或actions中的方法和全局的并无区别,开启命名空间后,必须通过模块名去访问。

使用流程：

        同步流程: commit > mutations > state

        异步流程: commit > actions > muttions > state

vuex的缺点/解决方案：

        数据不能持久化,想解决该问题/利用本地存储,或者利用插件实现自动存储vuex-persistedstate。

应用场景：

        在开发项目的时候,一般用户信息或者token/或者网页的配置数据存入vuex。

四、ref获取子组件

        通过给子组件绑定ref，再通过$refs就可以访问到子组件中的值和方法。

五、v-model 

        给子组件绑定v-model，v-model一般在表单中使用，可以实现双向数据绑定的效果，也可以在子组件中使用，在子组件中使用，可以解析出一个input自定义事件和绑定了一个value数据给子组件，子组件内部可以通过props来接收这个value,并且可以通过$emit来触发input事件来修改数据。v-model一个组件只能使用一次

        使用场景：父向子传值，子向父改值

六、.sync

        .sync修饰符，是在给子组件绑定属性时使用的，原理跟v-model差不多，.sync可以解析成一个 update:属性 的自定义事件和绑定了一个属性给子组件，子组件内部也可以通过$emit来触发这个自定义事件来修改父组件内部的值，.sync可以使用多次。

七、$children

        可以获取当前组件的所有子组件,并以数组的格式返回数据（不建议使用）

八、$parent

        可以获取到当前组件的父组件, 返回当前组件的父组件（不建议使用）

九、provide/inject

        provide进行给后代组件提供值,inject在后代组件上进行注入值

十、$attrs

        获取到当前组件节点上的所有属性集合

十一、数据提升

        将数据定义到父组件,一个组件通过子向父传值,父组件在传递给另一个组件

十二、eventbus

        作用：可以实现兄弟组件通信

        本质：利用vue实例对象

        实现原理：利用发布订阅模式

1. 传递数据的组件：通过eventbus中的方法$emit来发布自定义事件，并且传递数据
2. 接收数据的组件： 通过eventbus中的方法$on来订阅事件，并通过回调函数接收数据

        设计模式：

        发布订阅模式是一种一对多的依赖关系，发布方是一，订阅方是多，发布方发布消息，所有的订阅方都可以接收消息

// 手写发布订阅模式
class EventBus {
  // 记录事件和回调
  clientList = {
    send: [() => {}, () => {}],
  }
  // 订阅事件,参数event事件名,callback 回调
  $on = function (event, callback) {
    // 将事件和函数记录
    // 如果事件记录过,那就将回调push
    if (this.clientList[event]) {
      this.clientList[event].push(callback)
    } else {
      this.clientList[event] = [callback]
    }
  }

  $emit = function (event, val) {
    if (!this.clientList[event]) {
      throw new Error(event + ' is not a event')
    }
    this.clientList[event].forEach((cb) => {
      cb(val)
    })
  }
}

const eventBus = new EventBus()

// 订阅事件
eventBus.$on('send', (val) => {
  console.log('send订阅' + val)
})
eventBus.$on('send', (val) => {
  console.log('send订阅' + val)
})

eventBus.$emit('send', 1)