vue非父子组件间传参问题

末蓝、 2023-06-04 06:56 22阅读 0赞

最近在使用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][https_segmentfault.com_a_1190000012555128]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[https_segmentfault.com_a_1190000012555128]: https://segmentfault.com/a/1190000012555128