There are several ways to register vue custom components.

There are three ways to register vue custom components: 1. Partial registration, register the custom component in the components of the App. 2. Global registration, register (mount) custom components in "main.js". 3. Create a folder with the same name as the component in the "src/plugin" directory, then place the custom component file in this directory, and then create another "index.js" file in this directory. Write the registration code in the file to register the custom component as a plug-in.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Create project

Execute the following example command through cmd to initialize our Vue project

vue create helloworld cd helloworld code . npm run serve

After the command is executed, the project structure is as shown below ：

Next, we create a custom componentsplash.vuein thesrc/componentsdirectory. The sample code is as follows Shown:

Registered as a local component

We know that vue will automatically create a project for us throughVue-CLIThe root component ofApp.vueis used to host the entire application. If we register our custom component in App'scomponents, then it is also considered a local component and can only be applied Within a component like App. The registration method is as follows:

Executenpm run serve, and the following effect will appear:

Register as a global component

If we want to register our component as a global component so that all other components can use it, we need to register our component as a global component. Similarly, we need to register our global component in 'main.js', the sample code is as follows:

import Vue from 'vue' import App from './App.vue' // 1. 导入自定义组件 import Splash from './components/Splash.vue' Vue.config.productionTip = false // 2. 将自定义组件注册成全局组件 Vue.component(Splash.name, Splash) new Vue({ render: h => h(App), }).$mount('#app')

ModifyHelloWorld.vue, use the global component registered above, The sample code is as follows:

ModifyApp.vueand use the global component registered above. The sample code is as follows:

Executenpm run serve, the following effect will appear:

Register as plug-in

Because plug-ins are more flexible , so we can register custom components as global components. According to Vue's convention, we need to adjust our project structure.

Create a folder with the same name as the component in thesrc/plugindirectory, then put the splash.vue file we defined above into this directory, and then create it under this directory Aindex.jsfile, by writing the registration code in this file, register our custom component as a plug-in. The sample code is as follows:

import Splash from './Splash' export default { install: function (Vue, options) { // 1.获取构造函数 const contructor = Vue.extend(Splash) // 2. 实例化组件对象 const instance = new contructor() // 3. 创建页面元素 const oDiv = document.createElement('div') document.body.appendChild(oDiv) // 4. 将组件挂载到页面元素上 instance.$mount(oDiv) if (options !== null && options.title !== undefined) { instance.title = options.title } // 添加全局方法 Vue.ToggleSplash = function () { instance.isShow = !instance.isShow; } // 添加实例方法 Vue.prototype.$ToggleSplash = function () { instance.isShow = !instance.isShow; } } }

Modifymain.js, the sample code is as follows:

import Vue from 'vue' import App from './App.vue' // 1. 导入自定义组件 import Splash from './plugin/splash/index' Vue.config.productionTip = false // 2. 将自定义组件注册成组件 Vue.use(Splash, { title: 'hello world' }) new Vue({ render: h => h(App), }).$mount('#app')

Next, we can call Vue in any component The global method or instance method of the object is used to control our custom components. For example, we can use it inhello-worldlike this:

Executenpm run serve, The following effect will appear:

[Related recommendations:vuejs video tutorial,web front-end development]

The above is the detailed content of There are several ways to register vue custom components.. For more information, please follow other related articles on the PHP Chinese website!