注册
登录
Vue
Vue v-on：click在组件上不起作用
返回
Vue v-on：click在组件上不起作用
作者:
狗头军师
发布时间:
2025-03-03 10:18:07 (13小时前)
<p>我正在尝试在组件内部使用on click指令，但它似乎不起作用。当我单击该组件时，应该在控制台中单击“测试”，什么也没有发生。我没有在控制台中看到任何错误，所以我不知道我在做什么错。</p> <pre><code>index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> </code></pre><p>应用程序</p> <pre><code><template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default { name: 'app', methods: { testFunction: function (event) { console.log('test clicked') } }, components: { Test } } </script> </code></pre><p>Test.vue（组件）</p> <pre><code><template> <div> click here </div> </template> <script> export default { name: 'test', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> </code></pre>
收藏
举报
2 条回复
1#
回复此人
v-star*위위
|
2020-08-04 17-51
如果要在组件的根元素上侦听本地事件，则必须使用.native修饰符用于v-on，如下所示： ``` <template> <div id="app"> <test v-on:click.native="testFunction"></test> </div> </template> ``` 或简而言之，如评论中所建议，您也可以执行以下操作： ``` <template> <div id="app"> <test @click.native="testFunction"></test> </div> </template> ```
编辑
登录
后才能参与评论
