<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>给组件绑定原生事件</h3> <!-- 这里是子组件向父组件传递参数绑定的自定义事件 --> <child :content="msg" @click="handleClick"></child> <h4>给组件绑定事件添加修饰符native</h4> <child :content="msg" @click.native="handleNativeClick"></child> </div> </body> <script type="text/javascript"> Vue.component('child', { props: ['content'], template: '<div @click="handleClickSub">{{content}}</div>', methods: { handleClickSub () { this.$emit('click') } } }) let vm = new Vue({ el: '#app', data: { msg: 'this is a child' }, methods: { handleClick () { console.log('子组件向父组件传递参数绑定的事件') }, handleNativeClick () { console.log('绑定原生事件') } } }) </script> </html>
vue_子组件绑定原生事件
猜你喜欢
转载自www.cnblogs.com/JunLan/p/12420774.html
今日推荐
周排行