How to solve the click failure problem of vue custom component @ click

This article mainly explains the "vue custom components @ click click failure problem how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "vue custom components @ click click failure problem how to solve" it!

Custom component @ click Click failure problem description

The custom component is unable to bind native click events in the original vue file

Cause analysis

According to the query of the vue official document, we know that the click event acts inside the component, and if the click event is not written in the component, there will be no response.

Problem solving

1. Refer to the official documentation and use @ click.native= "click" to solve the problem.

two。 Can be used: pass events into components, but also in line with the one-way data flow between components, this is how I solved

How to write the main component:

How to write the called component: bind the click to the place inside the custom component where you want click

3. Use $emit to implement event delivery

The writing of the parent component is not affected, but can be written directly according to the original method, which is suitable for obsessive-compulsive disorder and Virgo users.

@ click does not work and reports an error

Click to report an error:

_ vm.gotoExpense is not a functionError: _ vm.gotoExpense is not a functionat http://127.0.0.1:24333/appservice/common/vendor.js:1186:23at Array.forEach () at http://127.0.0.1:24333/appservice/common/vendor.js:1171:23at Array.forEach () at Je.handleEvent [as _ e] (http://127.0.0.1:24333/appservice/common/vendor.js:1161:17)at Object. R.safeCallback (http://127.0.0.1:24333/appservice/dev/WAService.js:2:1827260)at http://127.0.0.1:24333/appservice/dev/WAService.js:2:1966938at s (http://127.0.0.1:24333/appservice/dev/WAService.js:2:1980424)at http://127.0.0.1:24333/appservice/dev/WAService.js:2:1966863at r (http://127.0.) 0.1:24333/appservice/dev/WAService.js:2:1904675)

Check if you * * methods: {} * * have written two!

Thank you for your reading, the above is the "vue custom components @ click click failure problem how to solve" the content, after the study of this article, I believe you on the vue custom components @ click click failure problem how to solve this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!