vue - 组件通信

每个Vue实例都是一个事件触发器：

• $on()——监听事件。
• $emit()——把事件沿着作用域链向上派送。（触发事件）
• $dispatch()——派发事件，事件沿着父链冒泡。
• $broadcast()——广播事件，事件向下传导给所有的后代。

父子组件之间的访问

• 父组件访问子组件：使用$children或$refs
• 子组件访问父组件：使用$parent
• 子组件访问根组件：使用$root

父组件 App.vue:

<template>
    <div id="app">
        <child message="hello" ref="hello"></child>
        <child v-bind:message="msg" v-on:listenToChildEvent="showMsgFromChild"></child>

        <br/>
        <button @click="showChildComponentData">显示子组件的数据</button>
    </div>
</template>

<script>
import child from './components/Child'

export default {
    name: 'app',
    data() {
        return {
            msg: "Hello, child!"
        }
    },
    methods: {
        showMsgFromChild( data ) {
            alert( data );
        },

        showChildComponentData() {
            console.log( this.$refs.hello );
            alert( this.$refs.hello.msg );
            alert( this.$refs.hello.message );
        }
    },
    components: {
        child
    }
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

子组件 Child.vue:

<template>
    <div>
        <h2>child子组件部份</h2>
        <p>{{message}}</p>
        <button type="button" name="button" v-on:click="sendMsgToParent">向父组件传值</button>

        <br>
        <button type="button" name="button" @click="showParentMsg">显示父组件信息</button>
    </div>
</template>

<script>
  export default {
    data() {
        return {
            msg: "在父组件（App.vue）通过 $ref 调用"
        }
    },
    props: [ 'message' ],
    methods: {
        sendMsgToParent() {
            this.$emit( "listenToChildEvent", "this message is from child!" );
        },

        showParentMsg() {
            console.log( this.$parent );
            alert( this.$parent.msg );
        }
    }
  }
</script>
<style>

</style>