什么都可以不好,心情不能不好;什么都可以缺乏,自信不能缺乏;什么都可以不要,快乐不能不要;什么都可以忘掉,健身不能忘掉。
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现
组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事件需要加一个.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其它相关文章!