Vue中的8种组件通讯方式

时间  2019-11-13
标签 vue 组件 通讯 方式 繁體版
原文   原文链接

　　Vue是数据驱动视图更新的框架，因此对于vue来讲组件间的数据通讯很是重要。html

　　常见使用场景能够分为三类:vue

    • 父子组件通讯: props / $emit $parent / $children provide / inject ref $attrs / $listeners程序员

    • 兄弟组件通讯: eventBus Vuex数组

    • 跨级通讯: eventBus Vuex provide / inject $attrs / $listenerssession

 

1、props / $emit （最经常使用的组建通讯方式）

　　父组件经过props的方式向子组件传递数据，而经过$emit 子组件能够向父组件通讯。app

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

    • 传入一个静态的值框架

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

    • 传入一个动态的值，任何类型的值均可以传给一个 prop。ide

　　<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监听并接收参数。post

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!')
    }
  }
})

 

2、 $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 是个对象。

 

3、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"
  }
  // ...
}

 

4、ref / refs

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

<base-input ref="usernameInput">
    <input ref="input">
</base-input>
<script>
    methods: {
     // 用来从父级组件聚焦输入框
        focus: function () {
        this.$refs.input.focus()
  }
}
</script>

 

5、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>​
  1. // addtionNum.vue 中发送事件 ​ <template> <div> <button @click="additionHandle">+加法器</button> </div> </template>
  1. <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', {})

 

6、Vuex

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

　　若是你还想对Vuex 有更多的了解，能够看个人另外一篇博客：http://www.javashuo.com/article/p-dlxvbznm-ey.html

 

7、$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>

 

8、localStorage / sessionStorage

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

 

  总结：

  1. props / $emit 是使用最多，也最推荐的方式。适用于父子组件通讯。

  2. Vuex 是 Vue 官方提供的组件通讯方式，适用于构建大型单页面项目。

  3. $children / $parent ，ref ，$attr / $listener 主要是经过操做父子组件的实例来获取组件的数据，实现组件通讯。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程