vue组件间的通信

最新推荐文章于 2023-12-20 15:02:28 发布

原创最新推荐文章于 2023-12-20 15:02:28 发布 · 340 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文详细介绍了Vue.js中组件间通信的方法，包括父子组件间的直接通信、非父子组件间通过事件中心通信以及复杂应用中利用Vuex的状态管理进行通信。

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，这样就不需要上述步骤啦。