用法一：模块化引入挂载组件

import Vue from "vue";
import Demo from "./Demo.vue";  //引入这个vue文件
Vue.config.productionTip = false;

new Vue({
  components: {
    Demo1: Demo  //在vue实例的components中声明这是我要用的组件，并且命名为Demo1
    //如果组件名就叫Demo，即Demo：Demo，那就写Demo
    //components: {Demo},
  },
  data() {
    return {
      n: 0
    };
  },
  template: `
  <div class=red>
  {{n}}
  <button @click="add">+1</button>
  <Demo1/>   //这样在这个Vue实例的template中就可以直接使用这个组件`<Demo1/>`
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  }
}).$mount("#app");

用法二：全局组件（vue完整版场景）

• mian.js文件

import Vue from "vue";
Vue.config.productionTip = false;

Vue.components('Demo2,{template:`<div>Demo2</div>`}') //全局组件，写组件名字和内容
new Vue({
  data() {
    return {
      n: 0
    };
  },
  template: `
  <div class=red>
  {{n}}
  <button @click="add">+1</button>
  <Demo2/>   //在Vue实例的template中就可以使用这个组件`<Demo2/>`
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    }
  }
}).$mount("#app");

用法三：以上两种方法结合（vue完整版场景）

import Vue from "vue";
Vue.config.productionTip = false;

new Vue({
  components: {
    Demo3: { template: `<div>Demo2</div>` }  //在vue实例的components中写这个vue实例要用的组件，组件名为Demo3，内容和options一模一样，除了data必须用函数
  },
  data() {
    return {
      n: 0
    };
  },
  template: `
  <div class=red>
  {{n}}
  <button @click="add">+1</button>
  <Demo3/>   //直接在这个Vue实例的template中就可以使用这个组件`<Demo3/>`
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    }
  }
}).$mount("#app");