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

父子组件的传值通信

父组件向子组件传值

• 父组件：

<template>
    <child :message="parentMessage"></child>
</template>

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

• 子组件：

<template>
    <p>{{message}}</p>
</template>

/* 一般形式 */
data () {
    props: ["message"]
}

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

子组件向父组件传值

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

• 父组件：

<template>
    <div class="root">
        /* 自动监听子组件注册的 getChildValue 事件*/
        <child @getChildValue="receive"></child>
        
        <p>{{valueFromChild}}</p>
    </div>
</template>

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

• 子组件：

<template>
    <button @click="sendValueToParent">click to send value to parent</button>
</template>

data () {
    return {
        childValue: 'this is child Value'
    }
},
methods: {
    sendValueToParent () {
        /* 将 childValue 传递给父组件 */
        this.$emit('getChildValue', this.childValue)
    }
}

非父子组件之间的传值通信

1. 创建 eventBus.js

import Vue from 'vue'

var bus = new Vue()

export default bus

2. 组件 A

<template>
    <div class="root">
        <button @click="sendMessageToB">click here to send a message to B</button>
    </div>
</template>

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

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

3. 组件 B

<template>
    <div class="root">{{messageFromA}}</div>
</template>

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

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