【子向父传参一】Vue-cli脚手架创建项目之子组件向子组件传递参数之$emit发射方法！！！

Child.vue文件（子组件发送数据）


<template>
    <div class="child">
        <p><span>这里是子组件的地盘！！！</span></p>

        <p>
            # 子组件发射数据最关键的位置
            <button @click="send_data">发射</button>
        </p>

    </div>

</template>

<script>
    export default {
        name: 'child',
        data () {
            return {
                user: { firstname: '父组件name', lastname: '子组件name' }
            };
        },
        methods: {

            send_data: function ( event ) {
                console.log( 'child组件数据发射成功！！！' );

                this.$emit( 'child_send_data', { user: this.user } );
            }
        }
    };
</script>

<style lang="scss">

</style>

Parent.vue文件(父组件接收数据)

<template>
    <div class="parent">
        <p><span>这里是父组件的地盘！！！ {{user}}</span></p>

        # 父组件接收子组件发送的数据最关键的位置
        <Child @child_send_data="recevie_child_data"></Child>
    </div>
</template>

<script>
    import Child from '@/components/test/Child';

    export default {
        name: 'parent',
        data () {
            return {
                user: null
            };
        },
        methods: {
            recevie_child_data: function ( args ) {
                console.log( args );
                if ('user' in args) {
                    this.user = args.user;
                }
            }
        },
        components: {
            Child
        }
    };
</script>

<style lang="scss">

</style>