Vue组件化--子组件到父组件的通信

子组件到父组件的通信：自定义事件

// child <HelloWorld/>
<template>
    <div class="hello">
        <h1 @click="$emit('foo', 'bar')">{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        props: { msg: String }
    }
</script>

/**------------------------------------------------------------------------------------*/
// parent
<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App" @foo="onFoo($event)"/>
    </div>
</template>

<script>
    import HelloWorld from "@/components/HelloWorld.vue";

    export default {
        name: "Home",
        components: { HelloWorld },
        // 孩子里面去派发， 父组件中监听（观察者模式），谁派发谁监听
        methods: {
            onFoo () {
                console.log('onFoo')
            }
        }
    }
</script>