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.
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.vue
in thesrc/components
directory. The sample code is as follows Shown:
{{ title }}
{{ message }}
We know that vue will automatically create a project for us throughVue-CLI
The root component ofApp.vue
is 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:
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:
{{ msg }}
ModifyApp.vue
and use the global component registered above. The sample code is as follows:
Executenpm run serve
, the following effect will appear:
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/plugin
directory, then put the splash.vue file we defined above into this directory, and then create it under this directory Aindex.js
file, 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-world
like this:
{{ msg }}
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!