Vue组件通讯的几种方式

说到组件通讯大家一般都会想到，父传子、子传父、或者兄弟组件传参(Bus.js事件总线)，
这三种我之前有发表过，还有不明白的可以去看一看：父传子、子传父、兄弟组件传参
除了这些其实还有好多可以实现组件传参的方法，下面为大家详细的介绍一下其他几种：

1、ref 传值

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例
通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

• 它的原理就是：在子组件上绑定一个 ref 属性，然后通过 $refs 可以调用子组件中的方法从而达到传值的目的。

1. 在父组件中引入子组件并绑定 ref

<template>
  <div class="home">
  	<button @click='sonObj'>发送</button>
    <Son ref='son'></Son>
  </div>
</template>

<script>
import Son from "../components/Son";
export default {
  name: "Home",
  components: { Son },
  data() {
    return {
       obj:{
        name:'张三',
        age:18
      }
    };
  },
  methods: {
  // 调用子组件中的方法并传入数据
    sonObj() {
     	this.$refs.sonObj.getData(this.obj)
    },
  },

2. 子组件定义方法接受数据

methods: {
    getData(obj){
       this.data= obj 
    }

2、localStorage 和 sessionStorage

本地存储其实大家都知道，可能太熟了会忘记了他们也可以实现组件传参。

• localStorage 和 sessionStorage 使用方法一样

	// localStorage  和 sessionStorage 这俩使用方法一样
	let obj = {
        	name: "张三",
       		age: 18,
      	};
      // 这里要说的一点是因为本地存储只能存放字符串类型的，所以在存放之前要先转换成字符串
      // 当然如果本来就是字符串类型的可以直接存放
       window.localStorage.setItem("obj", JSON.stringify(obj));

在其他组件中获取：

	// 因为我们存的是引用数据类型，所以获取的时候要把它转换成过来
   let obj =  JSON.parse(window.localStorage.getItem('obj'))

3、vuex

vuex的概念： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。

1. 在vuex中定义好方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     obj = {}
  },
  mutations: {
    getObj(state,obj){
      state.obj = obj
    }
  },
  actions: {
  },
  modules: {
  }
})

2. 在要传递数据的组件中调用方法

      let obj = {
        name: "张三",
        age: 18,
      };
      // 通过 this.$state.commit()调用，参数一:vuex中的方法名 参数二: 要传入的数据
      this.$state.commit('getObj',obj)

3. 在接受数据的组件中接受数据

// 可以直接使用
<template>
  <div class="son">
	<p>{{this.$store.state.obj.name}}</p>
  </div>
 </template>


// 也可以通过映射的方法映射过来使用
<template>
  <div class="son">
    <p>{{obj.name}}</p>
  </div>
</template>

<script>
// 在这里引入Vuex
import { mapState } from 'vuex'
export default {
  name: "Son",
  props: {},
  // state 和 getter在计算属性里解析，mutations 和 actions 在 methods 方法中解析
  computed: {
    ...mapState(['obj'])
  }
};
</script>

4、 $parent 和 $children （不推荐）

$children 是父组件的方法 ：
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

也就是说用$children的时候你要知道你想调用的是那个子组件，要通过的它的下标来找到相应的组件

$parent 是子组件中的方法：
$parent 都能够实现访问父组件的属性和方法，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件。

父组件代码：

• $children 有一个很坑的点就是不能在 created 钩子中调用，可以在 mounted 中调用

<template>
  <div class="home">
    <Son></Son>
  </div>
</template>

<script>
import Son from "../components/Son";
export default {
  name: "Home",
  components: {
    Son,
  },
  props: {},
  data() {
    return {
      name: "Holl 父级",
    };
  },
  mounted() {
    console.log(this.$children[0].text); // 我是子级
  },
  },
};
</script>

子组件代码：

• 在子组件中通过$parent获取到父组件的数据可以直接使用

<template>
  <div class="son">
    <button @click="parent">我是子级点击</button>
    <h2>{{$parent.name}}</h2> // Holl 父级  
  </div>
</template>

<script>
export default {
  name: "Son",
  props: {},
  data() {
    return {
      text: "我是子级",
    };
  },
  methods: {
      parent(){
          console.log(this.$parent.name);
      }
      
  },
};

未完待续。。。