Vue.javascript源码分析(十四)基础篇组件自定义事件详解

什么都可以不好,心情不能不好;什么都可以缺乏,自信不能缺乏;什么都可以不要,快乐不能不要;什么都可以忘掉,健身不能忘掉。

我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现

组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事件需要加一个.native修饰符。

子组件里通过过this.$emit()将自定义事件以及需要发出的数据通过以下代码发送出去,第一个参数是自定义事件的名称,后面的参数是依次想要发送出去的数据,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>Document</title>    
</head>
<body>
    <div id="d"><com @myclick="MyClick" @mouseenter.native="Enter"></com></div>
    <script>
        Vue.config.productionTip=false;
        Vue.config.devtools=false;
        Vue.component('com',{
            template:'<button @click="childclick">Click</button>',
            methods:{
                childclick:function(){this.$emit('myclick','gege','123')}                               //子组件的事件,通过this.$emit触发父组件的myclick事件
            }
        })
        debugger
        var app = new Vue({
            el:'#d',
            methods:{
                MyClick:function(){console.log('parent MyClick method:',arguments)},                    //响应子组件的事件函数
                Enter:function(){console.log("MouseEnter")}                                             //子组件的原生DOM事件
            }
        })
    </script> 
</body>
</html>

以上就是Vue.javascript源码分析(十四)基础篇组件自定义事件详解。也许一个人,要走很多的路,经历过生命中无数突如其来的繁华和苍凉,才会变成熟。更多关于Vue.javascript源码分析(十四)基础篇组件自定义事件详解请关注haodaima.com其它相关文章!

标签: Vue