1.如何给组件绑定原生事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- 父组件绑定事件想要触发，必须在子组件中向外触发事件 -->
<child @click="fuHandleClick">Child</child>
</div>
<script>
Vue.component('child',{
//子组件绑定事件直接触发即可,
template:'<div @click="childhandleClick">child</div>',
methods:{
childhandleClick:function(){
alert("childhandleClick");
this.$emit('click')//向哪个事件抛出
}
}
})
var app = new Vue({
el:'#root',
methods:{
fuHandleClick:function(){
alert('fuHandleClick')
}
}
})
</script>
</body>
</html>
2.效果同一，只需要给组件添加native修饰符即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- 父组件绑定事件想要触发，必须在子组件中向外触发事件 -->
<child @click.native="fuHandleClick">Child</child>
</div>
<script>
Vue.component('child',{
//子组件绑定事件直接触发即可,
template:'<div>child</div>'
})
var app = new Vue({
el:'#root',
methods:{
fuHandleClick:function(){
alert('fuHandleClick')
}
}
})
</script>
</body>
</html>
网友评论