vue中组件通信方式

作者: 回忆不死我们不散 | 来源:发表于2020-05-15 17:49 被阅读0次

学习 2019-6-19

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？
首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。
vue组件中关系说明:

image.png

如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与C之间是隔代关系； D与E是堂兄关系（非直系亲属）
针对以上关系我们归类为：

父子组件之间通信
非父子组件之间通信(兄弟组件、隔代关系组件等)

本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信。

image.png

一、`props` / `$emit`

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

1. 父组件向子组件传值

下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义']

image.png

总结: prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。

2. 子组件向父组件传值

对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。通过一个例子，说明子组件如何向父组件传递数据。
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标

image.png

二、 `$children` / `$parent`

image.png

上面这张图片是vue官方的解释，通过$parent和$children就可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例。

使用方法

image.png

要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象

总结

上面两种方式用于父子组件之间的通信，而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。

image

三、`provide`/ `reject`

概念:

provide/ reject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过reject来注入变量。

举例验证

接下来就用一个例子来验证上面的描述:
假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件

image.png

image

四、`ref` / `refs`

``ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据，我们看一个ref来访问组件的例子:

image.png

image

五、eventBus

eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以通知其他组件。

eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

在Vue的项目中怎么使用eventBus来实现组件之间的数据通信呢?具体通过下面几个步骤

1. 初始化

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

image.png

2. 发送事件

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

image.png

3. 接收事件

image.png

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

4. 移除事件监听者

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

image.png

image

六、Vuex

1. Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

2. Vuex各个模块

state：用于数据的存储，是store中的唯一数据源
getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件
actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

3. Vuex实例应用

image.png

vuex的store.js

image.png

image

七、`localStorage` / `sessionStorage`

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
通过window.localStorage.getItem(key)获取数据
通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse() / JSON.stringify() 做数据格式转换
localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

image

八 `$attrs`与 `$listeners`

现在我们来讨论一种情况，我们一开始给出的组件关系图中A组件与D组件是隔代关系，那它们之前进行通信有哪些方式呢？

使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递
使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低
使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.

在vue2.4中，为了解决该需求，引入了$attrs 和$listeners ，新增了inheritAttrs 选项。在版本2.4以前，默认情况下父作用域的不被认作props的属性百年孤独，将会“回退”且作为普通的HTML特性应用在子组件的根元素上。接下来看一个跨级通信的例子:

image.png

总结

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

父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
兄弟组件通信: eventBus ; vuex
跨级通信: eventBus；Vuex；provide / inject 、$attrs / $listeners

引用：https://www.bilibili.com/read/cv2898813/

参考：https://blog.csdn.net/liub37/article/details/83382205

vue中父子组件通信，都是单项的，直接在子组件中修改prop传的值vue也会给出一个警告，接下来就用一个小列子一步一步实现了vue自定义的组件实现v-model双向绑定，父组件值变了子组件也会跟着变，子组件中传过来的值变了，父组件值也会跟着变化。

父级组件

<template>
  <div>
    <p>我是父级组件</p>
    <p>父级组件内容：{{ text }}</p>
    <p><button @click="onChange">改变内容</button></p>
    <hr>
    <child v-model="text"></child>
  </div>
</template>
<script>
import Child from './child'
export default {
  components: {
    Child
  },
  data() {
    return {
      text: '我是父级组件的内容'
    }
  },
  methods: {
    onChange() {
      this.text = '我是由父级组件触发改变了内容'
    }
  }
}
</script>
<style scoped>
</style>

子组件

<template>
  <div>
    <p>我是子组件</p>
    <p>子组件内容：{{ value }}</p>
    <p><button @click="onChange">改变内容</button></p>
  </div>
</template>

<script>
export default {
  props: {
    //此处一定要用value
    value: {
      type: String
    }
  },
  methods: {
    onChange() {
      this.value = '我是由子组件触发改变了内容'
    }
  }
}

</script>
<style scoped>
</style>

预览

image.png

这时候我们点击父级组件中的改变内容按钮，发现一切正常，没有问题

image.png
然后我们再点击子组件中的改变内容按钮，发现父级组件没变化，子组件虽然变了，但是vue给出了警告，因为是单向数据流，子组件不应该直接修改prop传的值。难道就没哟办法了吗，办法肯定是有的，继续往下看。

image.png

只需要将代码稍微改造下，如下，在data中顶一个myValue值，指向prop传过来的value，点击按钮改变内容的时候，改变myValue的值，这样vue就不会给出警告了。

<template>
  <div>
    <p>我是子组件</p>
    <p>子组件内容：{{ myValue }}</p>
    <p><button @click="onChange">改变内容</button></p>
  </div>
</template>

<script>
export default {
  props: {
    //此处一定要用value
    value: {
      type: String
    }
  },
  data() {
    return {
      myValue: this.value
    }
  },
  methods: {
    onChange() {
      this.myValue = '我是由子组件触发改变了内容'
    }
  }
}

</script>
<style scoped>
</style>

此时还没完，发现子组件的内容变了，父级组件的内容却没有变化，点击父级组件的改变内容按钮后，子组件的内容也没变化，继续对代码进行改造

image.png

最终改造后的代码如下，重点是加个watch，监听父组件传过来的value和子组件的myValue

<template>
  <div>
    <p>我是子组件</p>
    <p>子组件内容：{{ myValue }}</p>
    <p><button @click="onChange">改变内容</button></p>
  </div>
</template>
<script>
export default {
  props: {
    //此处一定要用value
    value: {
      type: String
    }
  },
  data() {
    return {
      myValue: this.value
    }
  },
  methods: {
    onChange() {
      this.myValue = '我是由子组件触发改变了内容'
    }
  },
  watch: {
    //监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
    value(newVal) {
      this.myValue = newVal
    },
    //监听myValue，如果子组件中的内容变化了，通知父级组件，将新的值告诉父级组件，我更新了，父级组件接受到值后页就跟着变了
    //参考官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
    myValue(newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>
<style scoped>
</style>

看下动态效果图，父变子变，子变父变，也没有报错警告。

image.png

甚至还可以加个input框，也是没有问题的

image.png

Vue自定义组件-属性使用

<template>
  <button>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  }
}
</script>

//组件
<template>
  <div id="myButton">
    <ex-btn :msg="msg1"></ex-btn>
    <ex-btn v-bind:msg="msg2"></ex-btn>
    <ex-btn msg="按钮"></ex-btn>
  </div>
</template>
<script>
// 引入自定义组件
import btn from '@/components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  }
}
</script>

参考：https://www.cnblogs.com/yaokai729/p/11491080.html

vue中组件通信方式

一、`props` / `$emit`

1. 父组件向子组件传值

2. 子组件向父组件传值

二、 `$children` / `$parent`

使用方法

三、`provide`/ `reject`

举例验证

四、`ref` / `refs`

五、eventBus

1. 初始化

六、Vuex

1. Vuex介绍

2. Vuex各个模块

3. Vuex实例应用

七、`localStorage` / `sessionStorage`

八 `$attrs`与 `$listeners`

父级组件

子组件

Vue自定义组件-属性使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue中组件通信方式

一、props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

二、 $children / $parent

使用方法

三、provide/ reject

举例验证

四、ref / refs

五、eventBus

1. 初始化

六、Vuex

1. Vuex介绍

2. Vuex各个模块

3. Vuex实例应用

七、localStorage / sessionStorage

八 $attrs与 $listeners

父级组件

子组件

Vue自定义组件-属性使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、`props` / `$emit`

二、 `$children` / `$parent`

三、`provide`/ `reject`

四、`ref` / `refs`

七、`localStorage` / `sessionStorage`

八 `$attrs`与 `$listeners`