全局注册

    Vue.component('Vbutton', {
      template: `
      <div>
        <div @click="count++">+</div>
        <div>{{ count }}</div>
        <div @click="count--">-</div>
      </div>
      `,
      data: function () {
        return {
          count: 0
        }
      },
    });
    
    new Vue({
      el: '#app',
      template: '<div><Vbutton></Vbutton><Vbutton></Vbutton></div>',
    });

• 组件的实例化是通过执行其ctor构造函数完成的，背后的过程如下：

  const ctor = Vue.extend({
      template: `
      <div>
        <div @click="count++">+</div>
        <div>{{ count }}</div>
        <div @click="count--">-</div>
      </div>
      `,
      data: function () {
        return {
          count: 0
        }
      },
    });

    Vue.component('Vbutton', ctor);
    
    new Vue({
      el: '#app',
      template: '<div><Vbutton></Vbutton><Vbutton></Vbutton></div>',
    });

局部注册