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

栏目: JavaScript · 发布时间: 5年前

内容简介:Vue父子组件通讯的方法其实有很多,本文只是做一个总结,说说他们的优缺点,具体如何使用相关文档和网上大神已经总结的很多里,这里就不再说明。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension, 提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vuex是我平时项目里经常用的工具之一,相信大家

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

1.Vuex

介绍

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

vuex是我平时项目里经常用的 工具 之一,相信大家在项目中肯定也经常会使用它

使用方法

官网传送门

优缺点

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

2.EventBus

介绍

通过共享一个vue实例,使用该实例的 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)
  }
}
复制代码

优缺点

  • 优点
    • 解决了多层组件之间繁琐的事件传播。
    • 使用原理十分简单,代码量少。
  • 缺点
    • 由于是都使用一个Vue实例,所以容易出现重复触发的情景,例如:
      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一层层传递,可以跨层级传递。
  • 缺点
    它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。
    

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可以拿到父子组件的实例,从而调用实例里的方法,实现父子组件通信。并不推荐这种做法。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

世界是平的(3.0版)

世界是平的(3.0版)

[美] 托马斯·弗里德曼 / 何帆、肖莹莹、郝正非 / 湖南科学技术出版社 / 2008-9 / 58.00元

世界变得平坦,是不是迫使我们跑得更快才能拥有一席之地? 在《世界是平的》中,托马斯·弗里德曼描述了当代世界发生的重大变化。科技和通信领域如闪电般迅速的进步,使全世界的人们可以空前地彼此接近——在印度和中国创造爆炸式增长的财富;挑战我们中的一些人,比他们更快占领地盘。3.0版新增两章,更新了报告和注释方面的内容,这些内容均采自作者考察世界各地特别是整个美国中心地带的见闻,在美国本土,世界的平坦......一起来看看 《世界是平的(3.0版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码