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 component splash.vue in the src/components directory. The sample code is as follows Shown:

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "splash",
  props:[&#39;title&#39;],
  data: function () {
    return {
      message: "组件启动中...",
    };
  },
};
</script>

Registered as a local component

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

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <!-- 3.应用自定义组件 -->
    <splash title="hello world"></splash>
  </div>
</template>

<script>
// 1.导入组件
import Splash from "./components/Splash.vue";

export default {
  name: "App",
  components: {
    // 2.注册局部组件
    Splash,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Execute npm 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:

<template>
  <div class="hello">
    <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
    <!-- 应用自定义组件 -->
    <splash></splash>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<style scoped>
.hello {
  border: 1px dashed #00f;
}
</style>

Modify App.vue and use the global component registered above. The sample code is as follows:

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <splash></splash>
    <hello-world msg="我是子组件"></hello-world>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Execute npm 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 the src/plugin directory, then put the splash.vue file we defined above into this directory, and then create it under this directory A index.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;
        }
    }
}

Modify main.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 in hello-world like this:

<template>
  <div class="hello">
    <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
    <button @click="toggle1">使用全局方法控制显示或隐藏插件</button>
    <button @click="toggle2">使用实例方法控制显示或隐藏插件</button>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    toggle1: function () {
      // 通过全局方法来访问自定义组件
      Vue.ToggleSplash();
    },
    toggle2: function () {
      // 通过实例方法来访问自定义组件
      this.$ToggleSplash();
    },
  },
};
</script>

<style scoped>
.hello {
  border: 1px dashed #00f;
}
</style>

Execute npm 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!