VUE学习之父子组件通信

VUE父子组件通信

在Vue2.x版本以后,父子组件之间的通信变得比较容易,层次结构也比较清晰。主要通信方案主要有props+ $emit 方式、创建一个公用的VUE空实例类对象保存公用的数据、使用vuex进行公用的状态管理。接下来我们将对这几种方式一一介绍。

props + $emit()

此方式适用于父组件与自组件进行数据通信。那这种方式的数据传递方式是什么呢?简单来说,就是在父组件中,通过props属性的方式将数据传递给子组件,子组件在进行相关数据操作后,通过$emit() 再将值传递给父组件,通知父组件修改相关值。我们来看一下实例:
父组件:

// 父组件中,通过props的方式将值传递给子组件 
 <parent-component> // 为了保证代码风格的优良,在写组件是最好将驼峰写成html标签形式
     // 在这里,我们将使用myProp这个属性去接受来自父组件的数据value
     <child-component :my-prop="value"></child-component> 
 </parent-component> 

在子组件中创建props,创建方式有三种,一般视情况而定,此处使用最全的一种写法作为实例,其余两种由同学自行扩展:

export default {
    name: "childComponent",
    props: {
        myProp: { // 用于接收父组件所传递的值
            type: [Object, Array], // 可以为属性指定数据类型
            default: null, // 为属性指定默认值, 父组件传递的值会覆盖该值
            required: true, // 是否为必须的属性
            validator: function(value){ // 属性验证规则,当不满足条件时,属性值将不会正确获取,并且会在开发控制台报错
                // 验证规则
            }
        }
    }
}

子组件中,props的validator会在组件创建实例之前验证,所以其中是不能使用组件的属性。

通过这种方式,子组件就可以获取到父组件传入的值。但这种方式目前为止,只属于单向传递,如果在子组件直接修改prop值的话,Vue将会报错,这时就需要使用$emit()将值传递给父组件;
子组件:

// 在子组件中,处理完数据之后,再将prop 通过$emit()传递给父组件
export default {
    data() {
        childValue: 0 // 创建一个数据值用于复制prop的值,因为prop为单向传递,不能直接修改
    },
    mounted(){
        this.childValue = this.myProp;
        this.childValue += 100; // 处理数据
        this.$emit('changMyProp', this.childValue);// 通过$emit传递数据给父组件
    }
}

父组件:

// 父组件中需要监听来自子组件的$emit
 <parent-component>
     // 事件监听来自子组件的$emit
     <child-component :my-prop="value" @changeMyProp="onChangeValue"></child-component> 
 </parent-component> 

export default {
    method: {
        // 监听事件
        onChangeValue(value) {
            this.value = value; // 将子组件传递过来的值赋值给父组件中的value
        }
    }
}

注意:在此处事件名称要与子组件中注册的$emit 事件名相同,并且函数具有默认参数

到此,父组件与子组件的第一种通信方式介绍完毕。

创建一个公用的VUE空实例类对象

这种方法,使用与非父子组件之间的通信,就是创建一个公用的vue空实例对象,用于保存各组件公用的数据。
首先,创建一个eventBus.js文件,用于创建一个空VUE实例对象:

// eventBus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

创建好vue空对象实例之后,我们分别在需要进行通信的两个组件中引入eventBus

import EventBus from '@/js/eventBus.js';

假设需要通信的组件是A组件和B组件,当需要将A组件中的数据传递到 B组件时,就可以在A组件中通过EventBus使用$emit触发一个事件,并传入相关值:

changeValue() {
    this.testValue = 100;
    EventBus.$emit('numberChange', this.testValue);
}

然后,在B组件中,用EventBus通过$on在组件挂载时,接受到A组件传过来的值:

mounted(){
    EventBus.$on('numberChange', (value) => {
        console.log(value)
    });
}

如此,我们便能实现非父子组件之间的通信了。

VUEX

vuex是一个优秀的vue状态管理库,由于篇幅较多,再次不在对其进行阐述,我将专门开设一篇文章详细介绍Vuex。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值