vue组件间的通信可以分为:

  • 父子组件之间的通信;
  • 非父子组件之间的通信。    

一、父子组件间的通信:

    1. 父组件向子组件传值。

        父组件向子组件传值:

<parent>
    <child :msg="msg"></child>
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

        子组件通过props来接收数据(以下三种方式都可以)

props: {
    msg: Array 
}
props: ['msg']
props: {
    msg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

    2. 子组件想父组件传值。

        通过$emit来触发,$on来监听变化。

子组件:
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe');
    }
}
<div>
    <child @upup="change" :msg="msg"></child> 
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

3. 非父子组件之间传值

    可以通过创建一个eventHub事件中心,来实现。

    第一步创建事件中心: let Hub= new Vue();

    第二步触发:Hub.$emit('change',value);

    第三步接收:   Hub.$on('change',(value) => {

                                this.msg = value;

                            })

    Hub就是一个中转中心。


4. 复杂的网站直接传值可以使用vuex来实现传值,简单的就没有必要,否则只能增加代码的冗余度。

    要使用vuex必须要在你的项目中引用,

    第一步:npm install vuex --save;

    第二步:import Vuex from 'vuex'

                 Vue.use(Vuex);

    第三步:export default new Vuex.Store({})。

    当然也可以使用全局script标签引用vuex,这样就不需要上述步骤啦。










Logo

前往低代码交流专区

更多推荐