几种常见的Vue组件间的传参方式

时间 2019-12-06

标签几种常见的 vue 组件方式繁體版

原文原文链接

几种常见的Vue组件间的传参方式

Vue父子组件通信的方法其实有不少，本文只是作一个总结，说说他们的优缺点，具体如何使用相关文档和网上大神已经总结的不少里，这里就再也不说明。html

1.Vuex

介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，
提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex是我平时项目里常常用的工具之一，相信你们在项目中确定也常常会使用它vue

使用方法

请参考官网传送门vuex

优缺点

优势数组
- 解决了多层组件之间繁琐的事件传播。
- 解决了多组件依赖统同一状态的问题。
- 单向数据流
- 为Vue量身定作，学习成本不高
缺点ide
- 不能作数据持久化，刷新页面就要重制，要作数据持久化能够考虑使用localstorage。
- 增长额外的代码体积，简单的业务场景不建议使用。

2.EventBus

介绍

经过共享一个vue实例，使用该实例的$on以及$emit实现数据传递。工具

使用方法

下面是简单的使用方法学习

// bus.js
import Vue from 'vue'
export default new Vue({})

// component-a.js
import bus from './bus.js'
export default {
  created () {
    bus.$on('event-name', (preload) => {
      // ...
    })
  }
}

// component-b.js
import bus from './bus.js'
export default {
  created () {
    bus.$emit('event-name', preload)
  }
}

优缺点

优势ui
- 解决了多层组件之间繁琐的事件传播。
- 使用原理十分简单，代码量少。
缺点this
- 因为是都使用一个Vue实例，因此容易出现重复触发的情景，例如：url
  1. 多人开发时，A、B两我的定义了同一个事件名。
  2. 两个页面都定义了同一个事件名，而且没有用$off销毁（常出如今路由切换时）。
  3. 在for出来的组件里注册。
- 项目一大用这种方式管理事件会十分混乱，这时候建议用vuex。

3.props和\$emit/\$on

介绍

最基本的父组件给子组件传递数据方式，将咱们自定义的属性传给子组件,子组件经过$emit方法，触发父组件v-on的事件，从而实现子组件触发父组件方法

使用方法

props使用传送门

\$emit/\$on使用传送门

优缺点

优势
- 使用最为简单，也是父子组件传递最多见的方法。
- Vue为给props提供了类型检查支持。
- $emit不会修改到别的组件的同名事件，由于他只能触发父级的事件，这里和event-bus不一样
缺点
- 单一组件层级一深须要逐层传递，会有不少没必要要的代码量。
- 不能解决了多组件依赖统同一状态的问题。

Tips

\$attrs/\$listeners能够将父组件的props和事件监听器继承给子元素，在子组件能够调用到父组件的事件和props

$attrs使用传送门

$listeners使用传送门

4.provide/inject

介绍

在父组件上经过provide提供给后代组件的数据/方法，在后代组件上经过inject来接收被注入的数据/方法。

使用方法

官方传送门

优缺点

优势
- 不用像props一层层传递，能够跨层级传递。
缺点
- 用这种方式传递的属性是非响应式的，因此尽量来传递一些静态属性。
- 引用官网的话是它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。，我对这句话的理解是用了provide/inject你就要遵循它的组件组织方式，在项目的重构时若是要破坏这个组织方式会有额外的开发成本，其实event-bus也有这个问题。

5.slot

介绍

你能够在组件的html模版里添加自定义内容，这个内容能够是任何代码模版，就像：

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

父组件模板的全部东西都会在父级做用域内编译；子组件模板的全部东西都会在子级做用域内编译。

你也能够经过slot-scope属性来实现从子组件将一些信息传递给父组件，注意这个属性是vue2.1.0+新增的。

使用方法

官方传送门

优缺点

优势
- 能够在父组件里自定义插入到子组件里的内容，虽然其余属性也能够，可是我以为slot更倾向于自定义的条件是来自于父容器中。
- 复用性好,适合作组件开发。
缺点
- 和props同样不支持跨层级传递。

6.\$parent/\$children

介绍

经过\$parent/\$children能够拿到父子组件的实例，从而调用实例里的方法，实现父子组件通讯。并不推荐这种作法。

使用方法

经过this.$parent或者this.$children拿到父或子组件实例。官方传送门

优缺点

优势
- 能够拿到父子组件实例，从而拥有实例里的全部属性。
缺点
- 用这种方法写出来的组件十分难维护，由于你并不知道数据的来源是哪里，有悖于单向数据流的原则
- this.$children拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤为是子组件多的时候。