vue非父子组件间传参问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue非父子组件间传参问题相关的知识,希望对你有一定的参考价值。

最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:
一、如果两个组件用友共同的父组件,即


FatherComponent.vue代码
<template>
    <child-component1/>
    <child-component2/>
</template>
此时需要组件1给组件2传递某些参数,实现如下:

1、父组件给组件1绑定一个方法,让组件1进行回调,组件2接收某个属性,通过改变父组件的数据从而实现组件2的属性值的更新,即
父组件


<child-component1 :callback="child1Callback" />
<child-component2 :props="child2Props" />
data () {
    return {
        child2Props: '';
    }
}
child1Callback ([args...]) {
    // 此处更新了父组件的data,使组件2的属性prop改变
    this.child2Props = [args...]
}

组件1


props: ['callback']
change () {
    this.callback([args...])
}

2、通过bus进行实现,首先bus.js如下


const bus = new Vue()
export default bus

组件1


import bus from './bus'
methods: {
    change () {
        bus.$emit('callComponent2', [args...])
    }
}

组件2


import bus from './bus'
mounted () {
    bus.$on('callComponent2', function ([args...]) {
        // 做你想做的
    })
}

3、利用vuex实现,创建store.js相当于某些全局变量,但是可以被vue检测到变化


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    pageNo: 0
  },
  mutations: {
    'change' (state, [args...]) {
        state.pageNo++
    }
  }
})

export default store

项目入口js


import store from './store.js'
new Vue({
...
store: store
...
})

此时在任意vue文件都可以改变pageNo的值,并且会影响到所有使用了pageNo的组件,都会进行更新
childComponent1.vue


this.$store.commit('change')

childComponent2.vue


{{this.$store.state.pageNo}}

总结:
1、第一种比较绕,需要有共同的父组件,如果组件间层级太多,会导致代码混乱,比较难维护。
2、第二种比较直观,推荐使用,但是要理解,请仔细阅读官方文档
3、利用vuex在很多项目中都会显得杀鸡用牛刀,虽然更好理解,但是也带来了学习成本,并且可能会有一些副作用,但是如果项目比较复杂,利用vuex更加直观
综合各种方法的优缺点,推荐使用第二种,项目过于复杂请使用第三种
如果有更好的方法,请留言指教,谢谢

原文地址:https://segmentfault.com/a/1190000012555128

以上是关于vue非父子组件间传参问题的主要内容,如果未能解决你的问题,请参考以下文章

vue的父子组件间传值以及非父子间传值

非父子组件间传值

Vue中组件间传值常用的几种方式

微信小程序 父子组件间传参

vue组件间传参

vue组件间传参