vue组件

1.全局组件

 //   创建组件构造器
    var an = Vue.extend({
      template: `<h1>我的</h1>`,
    });
 //   注册组件，在vue实例范围中使用<my></my>
    Vue.component('my',an)

2.局部组件

 //   创建组件构造器
    var an = Vue.extend({
      template: `<h1>我的</h1>`,
    });
    var app = new Vue({
      el: "#app",
      data: {},
 //  注册组件
      components:{
          my:an
      }
    });

3.在组件中创建组件

//   创建组件构造器
    var an1 = Vue.extend({//子组件
      template: `<div>
        <h1>我是标题1</h1>
      </div>`,
    });
    var an2 = Vue.extend({//父组件
      template: `<div>
        <h1>我是标题2</h1>
        <you></you>
      </div>`,
      components: {
        you: an1,
      },
    });
    var app = new Vue({
      el: "#app",
      data: {},
      //  注册组件
      components: {
        my: an2,
      },
    });

4.简写

  Vue.component("my", {
      template: `<h1>我是标题1</h1>`,
    });

注意： 

1.extend里面可以写vue中除了el的其他配置项

2.extend可以省略不写直接写配置项

3.如果创建多个组件时，当template中只有一个标签时，需要给此标签外部再包括一个标签

5.组件模板抽离

//方法一
<script type="text/x-template" id="an">
    <h1>标题1</h1>
  </script>
 Vue.component("my", {
      template: "#an",
 });
//方法二
 <template id="an">
      <h1>标题1</h1>
 </template>
 Vue.component("my", {
      template: "#an",
 });