Vue中的8种组件通信方式

　　Vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要。

　　常见使用场景可以分为三类:

- 父子组件通信: props / $emit $parent / $children provide / inject ref $attrs / $listeners
- 兄弟组件通信: eventBus Vuex
- 跨级通信: eventBus Vuex provide / inject $attrs / $listeners

一、props / $emit （最常用的组建通信方式）

　　父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

　　1. 父组件向子组件传值（props）

- 传入一个静态的值

　　<blog-post title="My journey with Vue"></blog-post>

- 传入一个动态的值，任何类型的值都可以传给一个 prop。

　　<blog-post v-bind:title="post.title"></blog-post>

　　<blog-post v-bind:likes="42"></blog-post>

　　<blog-post v-bind:is-published="false"></blog-post>

　　<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post

　　<blog-post

 　　 v-bind:author="{

  　　  name: 'Veronica',

  　　  company: 'Veridian Dynamics'

 　　 }"

　　></blog-post>

　　　总结：props 只可以在父子组件中通信，即单向数据流。而且 props 是只读的，不可以被修改，所有修改都会被警告。

　　2. 子组件向父组件传值（$emit）

　　子组件通过 $emit 将参数传递给父组件,父组件通过v-on监听并接收参数。

Vue.component('welcome-button', {

  template: `

    <button v-on:click="$emit('welcome')">

      Click me to be welcomed

    </button>

  `

})

<div id="emit-example-simple">

  <welcome-button v-on:welcome="sayHi"></welcome-button>

</div>

new Vue({

  el: '#emit-example-simple',

  methods: {

    sayHi: function () {

      alert('Hi!')

    }

  }

})

二、 $children / $parent

　　$parent 可以访问到当前组件的父组件实例，$children 可以访问到当前组件的子组件实例。

// 父组件中

<template>

  <div class="hello_world">

    <div>{{msg}}</div>

    <com-a></com-a>

    <button @click="changeA">点击改变子组件值</button>

  </div>

</template>



<script>

import ComA from './test/comA.vue'

export default {

  name: 'HelloWorld',

  components: { ComA },

  data() {

    return {

      msg: 'Welcome'

    }

  },



  methods: {

    changeA() {

      // 获取到子组件A

      this.$children[0].messageA = 'this is new value'

    }

  }

}

</script>

// 子组件中

<template>

  <div class="com_a">

    <span>{{messageA}}</span>

    <p>获取父组件的值为:  {{parentVal}}</p>

  </div>

</template>



<script>

export default {

  data() {

    return {

      messageA: 'this is old'

    }

  },

  computed:{

    parentVal(){

      return this.$parent.msg;

    }

  }

}

</script>

　　注意：$parent 和 $children 得到的值不一样，$children 的值是数组，而 $parent 是个对象。

三、provide/ inject

　　provide/ inject 就是父组件中通过provide来提供变量, 然后在子组件中通过inject来注入变量。

　　provide 是一个对象或返回一个对象的函数。inject 是一个数组或对象。

　　注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中获取数据。

// 父级组件提供 'foo'

var Provider = {

  provide: {

    foo: 'bar'

  },

  // ...

}



// 子组件注入 'foo'

var Child = {

  inject: ['foo'],

  created () {

    console.log(this.foo) // => "bar"

  }

  // ...

}

四、ref / refs

　　ref：在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；用在组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据。

<base-input ref="usernameInput">

    <input ref="input">

</base-input>

<script>

    methods: {

     // 用来从父级组件聚焦输入框

        focus: function () {

        this.$refs.input.focus()

  }

}

</script>

五、eventBus

　　eventBus 又称为事件总线，在vue中是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。

　　1. 初始化

　　首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.

// event-bus.js



import Vue from 'vue'

export const EventBus = new Vue()

　　2. 发送事件

　　假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件；这里我们以兄弟组件为例:

<template>

  <div>

    <show-num-com></show-num-com>

    <addition-num-com></addition-num-com>

  </div>

</template>



<script>

import showNumCom from './showNum.vue'

import additionNumCom from './additionNum.vue'

export default {

  components: { showNumCom, additionNumCom }

}

</script>

// addtionNum.vue 中发送事件 <template> <div> <button @click="additionHandle">+加法器</button> </div> </template>

<script> import {EventBus} from './event-bus.js' console.log(EventBus) export default { data(){ return{ num:1 } }, methods:{ additionHandle(){ EventBus.$emit('addition', { num:this.num++ }) } } } </script>

3. 接收事件

// showNum.vue 中接收事件



<template>

  <div>计算和: {{count}}</div>

</template>



<script>

import { EventBus } from './event-bus.js'

export default {

  data() {

    return {

      count: 0

    }

  },



  mounted() {

    EventBus.$on('addition', param => {

      this.count = this.count + param.num;

    })

  }

}

</script>

　　这样就实现了在组件addtionNum.vue中点击相加按钮, 在showNum.vue中利用传递来的 num 展示求和的结果.

4. 移除事件监听者

　　如果想移除事件的监听, 可以像下面这样操作:

import { eventBus } from 'event-bus.js'

EventBus.$off('addition', {})

六、Vuex

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，主要解决的是开发大型单页面项目的组件通信问题。

　　如果你还想对Vuex 有更多的了解，可以看我的另一篇博客：https://www.cnblogs.com/yaokai729/p/11447644.html

七、$attrs与 $listeners

　　为了解决该需求，引入了$attrs 和$listeners ，新增了inheritAttrs 选项。默认情况下,父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)，将会“回退”且作为普通的HTML特性应用在子组件的根元素上。接下来看一个跨级通信的例子:

// app.vue

// index.vue



<template>

  <div>

    <child-com1

      :name="name"

      :age="age"

      :gender="gender"

      :height="height"

      title="程序员成长指北"

    ></child-com1>

  </div>

</template>

<script>

const childCom1 = () => import("./childCom1.vue");

export default {

  components: { childCom1 },

  data() {

    return {

      name: "zhang",

      age: "18",

      gender: "女",

      height: "158"

    };

  }

};

</script>

// childCom1.vue



<template class="border">

  <div>

    <p>name: {{ name}}</p>

    <p>childCom1的$attrs: {{ $attrs }}</p>

    <child-com2 v-bind="$attrs"></child-com2>

  </div>

</template>

<script>

const childCom2 = () => import("./childCom2.vue");

export default {

  components: {

    childCom2

  },

  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性

  props: {

    name: String // name作为props属性绑定

  },

  created() {

    console.log(this.$attrs);

     // { "age": "18", "gender": "女", "height": "158", "title": "程序员成长指北" }

  }

};

</script>

// childCom2.vue



<template>

  <div class="border">

    <p>age: {{ age}}</p>

    <p>childCom2: {{ $attrs }}</p>

  </div>

</template>

<script>



export default {

  inheritAttrs: false,

  props: {

    age: String

  },

  created() {

    console.log(this.$attrs);

    // { "gender": "女", "height": "158", "title": "程序员成长指北" }

  }

};

</script>

八、localStorage / sessionStorage

　　通过 window.localStorage.getItem(key) 获取数据，通过 window.localStorage.setItem(key,value) 存储数据。

总结：

props / $emit 是使用最多，也最推荐的方式。适用于父子组件通信。
Vuex 是 Vue 官方提供的组件通信方式，适用于构建大型单页面项目。
$children / $parent ，ref ，$attr / $listener 主要是通过操作父子组件的实例来获取组件的数据，实现组件通信。