javascript - vuejs的动态组件如何添加点击事件。
本文介绍了javascript - vuejs的动态组件如何添加点击事件。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如图
其中div的点击事件能够顺利执行，而动态组件中的点击事件则没有反应，即使所渲染的组件本身并没有绑定点击事件也是如此。
给动态组件外层包裹一个div确实能够解决事件捕获的问题，但相应的会带来样式上的问题，望大神指点。
解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>
<body>
<div id="app">
<component :is="name" @click.native="click"></component>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
Vue.component('btn', {
template: '<el-button>按钮</el-button>'
})
new Vue({
el: '#app',
data: function () {
return { name: 'btn' }
},
methods: {
click() {
console.log('click')
}
}
})
</script>
</body>
</html>这篇关于javascript - vuejs的动态组件如何添加点击事件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
