给组件绑定原生事件
2019-01-02 本文已影响8人
puxiaotaoc
1、使用emit发布方法；
2、使用.native修饰符；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<child @click="handleClick"></child>
</div>
<script>
// 组件绑定原生事件方法一
Vue.component('child', {
template: '<div @click="handleChildClick">hello</div>',
methods:{
handleChildClick:function(){
this.$emit('click')
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick:function(){
alert('dsd')
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<child @click.native="handleClick"></child>
</div>
<script>
// 组件绑定原生事件方法二：加native修饰符
Vue.component('child', {
template: '<div>hello</div>',
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick:function(){
alert('dsd')
}
}
})
</script>
</body>
</html>
