vue给组件绑定原生事件
程序员文章站
2022-05-30 22:43:45
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
})
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert('click')
}
}
})
</script>
</body>
</html>
但是我们绑定的事件 相当于 自定义的事件 所以并不会 运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
// 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
Vue.component('child', {
template: '<div @click="handleChildClick">Child</div>',
methods: {
handleChildClick: function() {
alert('child click')
}
}
})
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert('click')
}
}
})
</script>
</body>
</html>
那么自定义事件应该怎么触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
// 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
Vue.component('child', {
template: '<div @click="handleChildClick">Child</div>',
methods: {
handleChildClick: function() {
// alert('child click')
this.$emit('click')
}
}
})
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert('click')
}
}
})
</script>
</body>
</html>
但是这种方法过于麻烦 我们可以通过事件修饰符 去改善他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
// 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
Vue.component('child', {
template: '<div @click="handleChildClick">Child</div>',
methods: {
handleChildClick: function() {
// alert('child click')
this.$emit('click')
}
}
})
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert('click')
}
}
})
</script>
</body>
</html>