Detailed explanation of Vue custom dynamic component examples

Vue has many kinds of UI component libraries, but so many component libraries cannot meet our development needs, so we need to write a plug-in according to our own needs. Below, I will introduce you to js custom components through two chestnuts. Method, interested friends should take a look at it

There are many UI component libraries based on vue, such as iview, element-ui, etc. But sometimes these component libraries cannot meet our development needs. At this time, we need to write a plug-in ourselves.

The first chestnut

After building the project directory with vue-cli, create a new folder under src/components to put us in The plug-in to be written is as shown in the figure:

Write our component in index.vue, the code is as follows:

Index.js, write the install method of index.vue, and use Vue.component to register the component. The code is as follows:

Next we need to add it to the default main.js Import the index.js file you just wrote and use it through Vue.use. The code is as follows:

You’re done. You can use it directly in app.vue. Well, you can see that the corresponding components have been displayed on the page, as shown in the figure:

At this time we can also customize the click event and pass it to ours through parameters. Plug-in, the plug-in can obtain the event through the props attribute, as shown in the figure:

You can see that the page has taken effect:

Vue.component(id, [definition]) Used to register or obtain components.

Vue.use(plugin) is used to install Vue.js plug-in. If the plugin is an object, the install method must be provided. If the plugin is a function, it will be used as the install method. When the install method is called, Vue will be passed in as a parameter. When the install method is called multiple times by the same plug-in, the plug-in will only be installed once.

Let’s take the second example

Let’s create another folder, as shown in the picture:

We want to write a component that can display the content passed in from the outside and automatically disappear after 3 seconds. The code is as follows:

Next we need to add in index. Use the constructor in js to create it, as shown in the figure:

# Still reference the js file just now in the default main.js and add it to the Vue instance, so that we You can call it directly through this.$seconddemo(). The code is as follows:

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

Use it in app.vue and find that the plug-in is loaded successfully. As shown in the figure:

##Vue.extend(options) is the constructor of Vue, used to create a "subclass".

Uniform management of custom components

When there are a large number of components, we can manage these custom components by providing a unified export file , first create a new index.js file under the global folder, the code is as shown:

index.js file helps us pass all custom components through Vue.component Registered, and finally export an object containing the install method to Vue.use().

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

ajax implementation of clicking different links to display the returned content in a specific div

Jquery $ .Execution sequence of a piece of code outside the ajax function

Create ajax image upload by yourself

The above is the detailed content of Detailed explanation of Vue custom dynamic component examples. For more information, please follow other related articles on the PHP Chinese website!