脚本宝典收集整理的这篇文章主要介绍了几种常见的Vue组件间的传参方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue父子组件通讯的方法其实有很多,本文只是做一个总结,说说他们的优缺点,具体如何使用相关文档和网上大神已经总结的很多里,这里就不再说明。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,
提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
vuex是我平时项目里经常用的工具之一,相信大家在项目中肯定也经常会使用它
请参考官网传送门
优点
缺点
通过共享一个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)
}
}
优点
缺点
由于是都使用一个Vue实例,所以容易出现重复触发的情景,例如:
最基本的父组件给子组件传递数据方式,将我们自定义的属性传给子组件,子组件通过$emit方法,触发父组件v-on的事件,从而实现子组件触发父组件方法
优点
缺点
$attrs/$listeners可以将父组件的props和事件监听器继承给子元素,在子组件可以调用到父组件的事件和props
在父组件上通过provide提供给后代组件的数据/方法,在后代组件上通过inject来接收被注入的数据/方法。
优点
缺点
它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。
,我对这句话的理解是用了provide/inject你就要遵循它的组件组织方式,在项目的重构时如果要破坏这个组织方式会有额外的开发成本,其实event-bus也有这个问题。你可以在组件的html模版里添加自定义内容,这个内容可以是任何代码模版,就像:
<navigation-link url="/profile">
<!-- 添加一个 Font Awesome 图标 -->
<span class="fa fa-user"></span>
Your Profile
</navigation-link>
父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
你也可以通过slot-scope
属性来实现从子组件将一些信息传递给父组件,注意这个属性是vue2.1.0+新增的。
优点
缺点
通过$parent/$children可以拿到父子组件的实例,从而调用实例里的方法,实现父子组件通信。并不推荐这种做法。
通过this.$parent
或者this.$children
拿到父或子组件实例。官方传送门
优点
缺点
this.$children
拿到的是一个数组,你并不能很准确的找到你要找的子组件的位置,尤其是子组件多的时候。以上是脚本宝典为你收集整理的几种常见的Vue组件间的传参方式全部内容,希望文章能够帮你解决几种常见的Vue组件间的传参方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。