Vue.js父子组件和非父子组件间的传值通信

[toc]

• 父组件：

data () {    return {
        parentMessage: "this is a message from parent"
    }
}

• 子组件：

data () {
    props: ["message"]
}data () {
    props: {
        message: {
            type: String, //接收类型
            default: "this is the default value" // 默认值
        }
    }
}

Note 子组件不能直接更改父组件中的内容，因此可以通过子组件触发事件来传值给父组件。

• 父组件：

data () {
    return {
        valueFromChild: "defaultValue"
    }
},
methods: {
    receive (valueFromChild) {
        this.valueFromChild = valueFromChild
    }
}

• 子组件：

data () {    return {
        childValue: 'this is child Value'
    }
},
methods: {
    sendValueToParent () {        
        this.$emit('getChildValue', this.childValue)
    }
}

1. 创建 eventBus.js

import Vue from 'vue'var bus = new Vue()export default bus

1. 组件 A

import eventBus from '.../eventBus.js'

data () {
    return {
        message: "message from A"
    }
},
methods: {
    sendMessageToB () {
        eventBus.$emit('transfer', this.message); 
    }
}

1. 组件 B

import eventBus from '.../eventBus.js'data () {    return {
        messageFromA: "defaultValue"
    }
},created () {
    eventBus.$on('transfer', function (message) {
        this.messageFromA = message
    })
}

作者：沙海飞鱼
链接：https://www.jianshu.com/p/75ff1773ce41