Vue3 Component Registration (1)

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Compared to Vue2, registering components in Vue3 is much easier.

1. How to register components

If components are not used, complex logic is piled on top of each other like this:

<div id="app"></div>

<template id="my-app">
  <input type="text" v-model="message">
  <h2>{{ message }}</h2>

  <h2>{{ title }}</h2>
  <p>{{ desc }}</p>

  <button @click="btnClick">button</button>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    data() {
      return {
        message: 'Hello.'.title: 'I am the title'.desc: 'I'm content... '}},methods: {
      btnClick() {
        console.log(The button was clicked.); }},template: '#my-app'
  };

  Vue.createApp(App).mount('#app');
</script>
Copy the code

It is necessarily unrealistic to write everything together. Therefore, we can use components to pull the pieces out. That is, if we now have a piece of content (templates, logic, etc.) that we want to extract into a separate component to maintain, how do we register a component?

For example, the following template wants to be separated into a separate component:

<h2>{{ title }}</h2>
<p>{{ message }}</p>
Copy the code

Registered components fall into two categories:

• Global component: a component that can be used in any other component;
• Local component: a component that can be used only in a registered component;

2. Register global components

• Global components need to be registered using our globally created app;
• throughcomponentMethods the incomingComponent name,Component objectTo register a global component;
• We can then use this global component directly in the template of our App component:

The code in the element looks like this:

<div id="app"></div>

<template id="my-app">
  <h2>I am heading</h2>
  <p>I'm content...</p>

  <component-a></component-a>
  <component-a></component-a>
  <component-a></component-a>
</template>

<template id="component-a">
  <h2>I am heading</h2>
  <p>I'm content...</p>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    template: '#my-app'
  };

  const app = Vue.createApp(App)

  // Register a global component using the app object returned by Vue's createApp() function
  // Global component: this means that the registered component can be used in any component template (although registering global components is generally not recommended in development)
  // app.component.ponent (component name, component object);
  app.component('component-a', {
    // template: '
 I'm component-a 
'
    template: '#component-a'
  });

  app.mount('#app');
</script>
Copy the code

The global component registered above has only template, but we can register our own code logic (such as data, computed, methods, and so on) :

// Register a global component using the app object returned by Vue's createApp() function
app.component('component-a', {
  data() {
    return {
      title: 'I am the title'.message: 'I'm content... '}},methods: {
    btnClick() {
      console.log('Button clicked.'); }},template: '#component-a'
});
Copy the code

The code in the element looks like this:

<div id="app"></div>

<template id="my-app">
  <! -- Using components -->
  <component-a></component-a>
  <component-a></component-a>
  <component-a></component-a>
</template>

<template id="component-a">
  <h2>{{ title }}</h2>
  <p>{{ message }}</p>
  <button @click="btnClick">button</button>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    template: '#my-app'
  };

  const app = Vue.createApp(App)

  // Register a global component using the app object returned by Vue's createApp() function
  app.component('component-a', {
    data() {
      return {
        title: 'I am the title'.message: 'I'm content... '}},methods: {
      btnClick() {
        console.log('Button clicked.'); }},template: '#component-a'
  });

  app.mount('#app');
</script>
Copy the code

Of course, we can also register multiple global components:

<div id="app"></div>

<template id="my-app">
  <component-a></component-a>
  <component-b></component-b>
</template>

<template id="component-a">
  <h2>{{ title }}</h2>
  <p>{{ message }}</p>
  <button @click="btnClick">button</button>
</template>

<template id="component-b">
  <input type="text" v-model="message">
  <h2>ComponentB</h2>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    template: '#my-app'
  };

  const app = Vue.createApp(App)

  // Register a global component using the app object returned by Vue's createApp() function
  app.component('component-a', {
    data() {
      return {
        title: 'I am the title'.message: 'I'm content... '}},methods: {
      btnClick() {
        console.log('Button clicked.'); }},template: '#component-a'
  });

  // Register another global component named Component-b
  app.component('component-b', {
    data() {
      return {
        message: 'Hello World! '}},template: '#component-b'
  })

  app.mount('#app');
</script>
Copy the code

Page effect:

You might say, no, why is the button on the same line as the text field? The reason is quite simple, because in Vue3 the component template no longer needs to be wrapped with a root element. In Vue2, you need to wrap it with a root element, typically a

This is the process of registering multiple global components. It should be noted that registering global components is generally not recommended during development. Also, when we currently register multiple global components, all the code is still in one HTML file, which looks a bit complicated. Therefore, we will look at another development mode later: SFC (Single File Components) development mode, which is to extract the relevant code into a.vue File.