How vue binds click events to custom components

This article mainly introduces "vue how to bind click events to custom components". In daily operation, I believe many people have doubts about how vue binds custom components to click events. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how vue binds custom components to click events". Next, please follow the editor to study!

Bind click events to custom components

In doing projects, we often encapsulate a lot of components to reduce the repeatability of the code, improve the availability of the code, and sometimes bind events to the components, but often fail.

First bind a click event to the cardinfo component

Click events are usually given this way, but sometimes this event is useless because it is an event that references the component page, not the component itself, so the source of the event cannot be identified within the component.

Adding native after @ click indicates the event of the current page

Add a click event to a custom component

Define a button press component by yourself

{{btnMsg}} export default {name: 'UiEndbutton', props: ["btnMsg"], data () {return {};}, mounted () {}, methods: {},}; .endBtn width: 345px height: 44px border-radius: 4px background: radial-gradient

Reference this component on other pages

Introduce

Import EndButton from'@ / components/EndButton.vue';export default {name: 'UiEndyuyuetransfer', components: {PageTop, YuyueDetailItem, EndButton,}, methods: {toEndYuyueTransferResult () {this.$router.push ({name: "EndYuyueTransferResult"})}

On the page

Click the button and you will find that the method is not triggered.

When binding events to a vue component, you must add native, otherwise you will think that you are listening to events customized by the Item component.

At this point, the study on "how vue binds click events to custom components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!