Home > Web Front-end > JS Tutorial > body text

Introduction to the method of implementing custom buttons in Vue (with code)

不言
Release: 2019-03-29 09:58:02
forward
2881 people have browsed it

This article brings you an introduction to the method of implementing custom buttons in Vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In actual development projects, sometimes we use custom buttons; because in a project, there are many pages, and in order to unify the style, we will reuse many of the same or similar buttons. At this time, custom buttons Defining the button component comes in handy. We export the defined button component and reference it globally, so that it can be used in other components at will. This can greatly improve our work efficiency.

Okay, without further ado, here’s the code:
img-button.vue//This is our custom button component





Copy after login

Configure the routing in router.js
Introduce

//注册自定义按钮  
import imgButton from './components/img-button'
Vue.use(imgButton)
Copy after login

into main.js and then use it in other components

Copy after login

//It is worth noting that when adding a click event to a custom button component, you must add .native Because the .native modifier is used to register native events of elements rather than component custom events

This article has ended here. For more other exciting content, you can pay attention to the PHP Chinese websiteJavaScript video tutorial column! ! !

The above is the detailed content of Introduction to the method of implementing custom buttons in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!