【Vue】零基础学习Vue: 第24课 Vue子组件触发父主件方法并传递参数：子组件$emit发射事件

实现代码如下：

    
    $emit发射事件
    
    





    
    




    
    
我是子组件




    //1.定义子组件
    let son = {
        template:'#son',
        //子组件的数据
        data(){
            return {
                msg:'我是子组件的数据'
            }
        },
        //4.子组件定义方法函数
        methods:{
            fn(){   //把子组件的数据给父组件
                //$emit 向父组件发射一个事件  发射事件之后 父组件可以立马监控到
                //xxx表示事件名任意
                this.$emit('xxx',this.msg)
            }
        }
    }

    let vm = new Vue({
        el:'#app',
        //2.注册子主件
        components:{
            son
        },
        //6.设置方法
        methods:{
            change(value){
                console.log("子组件传过来的数据msg:"+value)
                console.log('子组件发射的xxx事件  我检测到了')
            }
        }
    })

运行结果如下：