Components are used to encapsulate some functions of a page, and encapsulate the structure, style, and logical code of a function as a whole. Improved functionality reusability and maintainability, and better focus on business logic. The component is used as a custom HTML tag. The component name is used as the custom tag name.

The component registration

Global registration

  • Globally registered components can be used in any instance or component after registration.
  • Note: Global registration must be set before the root Vue instance is created.
<div id="app">
    <p>This is the P tag</p>
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component', { 
      template: This is our globally registered component 
    });

    / / root instance
    new Vue({
      el: '#app'.data: {}})</script>
Copy the code

Component based

  • Components are essentially reusable Vue instances, so they can receive the same options as new Vue, such as Data, methods, and lifecycle hooks.
  • The only exceptions are root instance-specific options like EL.

Component naming rules

  • Components have two naming conventions:
  • Kebab – case: ‘my – component’
  • PascalCase:’MyComponent’

Note: No matter which naming is used, only kebab-case is available in the DOM.

<div id="app">
    <my-com-a></my-com-a>
    <my-com-b></my-com-b>
</div>
<script>
    // kebab-case to register
    Vue.component('my-com-a', {
      template: '
       

         This is the content of a component 
       
'
    });

    // PascalCase to register
    Vue.component('MyComB', {
      template: '
       

         This is the content of the B component 
       
'
    });

    new Vue({
      el: '#app'.data: {}})</script>
Copy the code

The template options

  • The template option is used to set the structure of the component, which is eventually introduced into the root instance or other components.

Note: The component must have only one root element.

<div id="app">
    <my-com-a></my-com-a>
</div>
<script>
    Vue.component('MyComA', {
      template: `
        <div>Here is the content of component A:{{ 1 + 2 * 3 }}
        </div>`}); new Vue({ el: '#app', data: {} });</script>
Copy the code

The data options

  • The Data option is used to store the component’s data. Unlike the root instance, the component’s data option must be a function, and the data is set in the return value object.
  • This is implemented to ensure that each component instance can maintain a separate copy of the returned object without affecting each other.
<div id="app">
    <my-com-a></my-com-a>
    <my-com-a></my-com-a>
    <my-com-a></my-com-a>
</div>
<script>
    Vue.component('MyComA', {
      template: `
        <div>
          <h3>{{ title }}</h3>
          <p>{{ content }}</p>
        </div>', data () {return {title: 'This is the component title ', Content:' This is the component content '}}}); new Vue({ el: '#app', data: { } });</script>
Copy the code

Local registration

  • Locally registered components can only be used in the current instance or component.
<div id="app">
    <my-com-a></my-com-a>
    <my-com-b></my-com-b>
</div>

<script>
    new Vue({
      el: '#app',
      data: {

      },
      components: {
        'my-com-a': {
          template: `
            <div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>', data () {return {title: 'component A title ', Content:' component A content '}}}, MyComB: {template: '<div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>', data () {return {title: 'component B', content:' component B content '}}}}});</script>
Copy the code
  • Option object for configuring components separately:
<div id="app">
    <my-component-a></my-component-a>
    <my-component-b></my-component-b>
</div>
<script>Var MyComponentA = {template: '<div>
          <h3>{{ title }}</h3>
          <p>{{ content }}</p>
        </div>', data () {return {title: 'component A title ', content:' component A content '}}}; Var MyComponentB = {template: '<div>
          <h3>{{ title }}</h3>
          <p>{{ content }}</p>
        </div>', data () {return {title: 'component B', content:' component B content '}}} new Vue({el: '#app', data: {}, components: { 'my-component-a': MyComponentA,<! --ES6 object properties -->
        MyComponentB
      }
    });

    // new Vue({
    //   el: '#app2'
    // })
</script>

Copy the code