我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现
组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事件需要加一个.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其它相关文章!




