Vue component registration full analysis

Global component registration syntax

Two parameters component name and component content in components

(Component name, {
   data: Component data,
   template:Component template content
  })

Global component registration application

Component creation:

('button-counter', {
   data: function(){
    return {
     count: 0
    }
   },
   template: '&lt;button @click="handle"&gt;Clicked{{count}}Second-rate&lt;/button&gt;',
   methods: {
    handle: function(){
      ++;
    }
   }
  })
  var vm = new Vue({
   el: '#app',
   data: {
   }
  });

How to apply the component name directly in the page

<div >
  <button-counter></button-counter>
</div>

This component can be reused and used directly on the page many times, cutting the data independently and does not interfere with each other.

Notes on component registration

Must be a function

Comparison between analysis functions and ordinary objects

2. The component template content must be a single root element

Analyze and demonstrate the actual effect

3. The component template content can be a template string

Template strings require browser support (ES6 syntax)

4. Component naming method

Short horizontal line method

('my-component',{/*...*/})

Hump mode

('MyComponent',{/*...*/})

If you use camel-style name components, then when using components, you can only use the camel-style component in string templates, but in ordinary label templates, you must use the component in a short horizontal line.

Local components

Local components can only be used in parent components that register it

Local component registration syntax

var ComponentA = {/*...*/}
var ComponentB = {/*...*/}
var ComponentC = {/*...*/}
new Vue({
  el : '#app',
  components: {
'component-a' : ComponentA,
'component-b' : ComponentB,
'component-c' : ComponentC
}
})

Component creation

('test-com',{
   template: '<div>Test<hello-world></hello-world></div>'
  });
  var HelloWorld = {
   data: function(){
    return {
     msg: 'HelloWorld'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var HelloTom = {
   data: function(){
    return {
     msg: 'HelloTom'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var HelloJerry = {
   data: function(){
    return {
     msg: 'HelloJerry'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var vm = new Vue({
   el: '#app',
   data: {
    
   },
   components: {
    'hello-world': HelloWorld,
    'hello-tom': HelloTom,
    'hello-jerry': HelloJerry
   }
  });

Applications on the page

<div >
  <hello-world></hello-world>
  <hello-tom></hello-tom>
  <hello-jerry></hello-jerry>
  <test-com></test-com>
 </div>

The above is the detailed content of the full analysis of Vue component registration. For more information about Vue component registration, please follow my other related articles!