父子组件通信

页面结构

<div id="app">
    <h1>父给子 - 用属性(props)</h1>
    <h1>子给父 - 用事件(event)</h1>
    <demo :msg="msg" @father="GetData"></demo>
</div>

<template id="demo">
    <div>
        <p>获取父组件给过来的数据：{{msg}}</p>
        <button @click="ClickMe">传送数据</button>
    </div>
</template>

逻辑结构

var app = new Vue({
    el: '#app',
    data: {
        msg:'hello father'
    },
    methods: {
        GetData(data)
        {
            console.log(`子组件给过来的数据：${data}`)
        }
    },
    components:{
        demo:{
            template: '#demo',
            props: ['msg'], //定义属性
            data()
            {
                return {
                    son:'hello son'
                }
            },
            methods: {
                ClickMe()
                {
                    this.$emit('father', this.son)
                }
            }
        }
    }
})