vue组件间的通信

最新推荐文章于 2024-07-22 21:47:11 发布

challenge_impossible

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量278

点赞数

分类专栏：前端文章标签： vue vue组件通信组件间通信

本文链接：https://blog.csdn.net/challenge_impossible/article/details/80421468

版权

4 篇文章 0 订阅

订阅专栏

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

关注