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

超、凢脫俗 2021-09-18 10:52 165阅读 0赞

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>