Vue3 component

Global component instance

Register a simple global component runoob and use it:

<divid="app"><runoob></runoob></div><script>// Create a Vue application const
app = Vue.createApp({}) // Define a new global component called runoob
app.component('runoob', { template: '<h1>Custom Components!</h1>' })
app.mount('#app')</script>

Next, let’s register another one. button-counter component, after each click, the counter will be added by 1:

// Create a Vue application
const app = Vue.createApp({})
// Define a new global component called button counter
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: \`
    <button @click="count++">
      Clicked {{count}} times！    </button>\`
})
app.mount('#app')
</script>

Reuse of components

You can reuse the component any number of times:

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Global component

In the above examples, our components only pass through the component globally registered.

Globally registered components can be created later in the app used in the instance template, and also in the templates of all subcomponents in theroot instance component tree.

Global component instance

Register a simple global component runoob and use it:

<divid="app"><runoob></runoob></div><script>// Create a Vue application const
app = Vue.createApp({}) // Define a new global component called runoob
app.component('runoob', { template: '<h1>Custom Components!</h1>' })
app.mount('#app')</script>

Local component

Global registration is often not ideal. For example, if you use something like webpack in such a build system, registering all components globally means that even if you no longer use a component, it will still be included in your final build result. This has resulted in an unnecessary increase in the number of JavaScript downloaded by users.

In these cases, you can define components through a normal JavaScript object:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

And then in components option to define the components you want to use:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

For components each attribute in the object, the attribute name is the name of the custom element (component-a, component-b), and the attributevalue is the component’s option object (ComponentA, ComponentB).

We can also register the local component in the instance option so that the component can only be used in this instance:

Local component instance

Register a simple local component runoobA and use it:

<divid="app"><runoob-a></runoob-a></div><script>var runoobA = {
template: '<h1>Custom Components!</h1>' } const app = Vue.createApp({
components: { 'runoob-a': runoobA } }) app.mount('#app')</script>

Prop

prop is a custom property that the child component uses to accept the data passed by the parent component.

The data of the parent component needs to be passed through the props pass data to the subcomponent, which needs to explicitly use the props option declaration “prop”:

<divid="app"><site-nametitle="Google"></site-name><site-nametitle="Runoob"></site-name><site-nametitle="Taobao"></site-name></div><script>const
app = Vue.createApp({}) app.component('site-name', { props: ['title'],
template: \`<h4>{{ title }}</h4>\` }) app.mount('#app')</script>

Dynamic Prop

Similar to using the v-bind bind the HTML attribute to an expression, or you can use the v-bind dynamic binding props into the data of the parent component Whenever the data of the parent component changes, the change is also transmitted to the child component:

<divid="app"><site-infov-for="site in
sites":id="site.id":title="site.title"></site-info></div><script>const
Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2,
title: 'Runoob' }, { id: 3, title: 'Taobao' } ] } } } const app =
Vue.createApp(Site) app.component('site-info', { props: ['id','title'],
template: \`<h4>{{ id }} - {{ title }}</h4>\` })
app.mount('#app')</script>

Prop verification

Component can be a props specify validation requirements.

In order to customize prop can use the verification method for props provides an object with validation requirements rather than an array of strings. For example:

Vue.component('my-component', {
  props: {
    // Basic type check (`null` and `undefined` will pass any type of verification)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Numbers with default values
    propD: {
      type: Number,
      default: 100
    },
    // Objects with default values
    propE: {
      type: Object,
      // The default value of an object or array must be obtained from a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validation function
    propF: {
      validator: function (value) {
        // This value must match one of the following strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

When prop validation fails, Vue (the build of the development environment) will generate a console warning.

type can be the following native constructor:

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

type can also be a custom constructor, using the instanceof test.