vue中的组件介绍

组件就是用来提高代码的复用性的。

组件的本质：上是一个可复用的小号的vue实例。 vue实例（new Vue）是最大的根组件。

组件在使用时就是一个自定义的标签。

组件分类：全局和局部。

定义全局组件：
Vue.component(“组件名”,配置对象) （全局组件可以用在不同的实例中）

组件渲染的结果是template中的内容！！！

【注意】：
1.template中的内容必须被一个元素包含。 这个元素被称为根节点（根元素）
2.每个组件有且只能有一个根元素。

template标签：
作用：模板占位符。为了解决在js中直接书写html代码的问题。

template定义在body中，里面书写封装的HTML结构代码。在使用的时候，在组件component的template中可以写一个css选择器， 选中该template标签就可以了。

示例全局组件

 <div id="app">
    <!-- 使用组件 -->

    <!-- 双标签用法 -->
    <v-tab></v-tab>
    <v-tab></v-tab>
    <!-- 单标签用法 -->
    <v-tab />
  </div>
  <div id="app2">
    <!-- 使用组件 -->

    <!-- 单标签用法 -->
    <v-tab />
  </div>

  <template id="first-template">
    <div>
      <h3>标题</h3>
      <p>文章的段落</p>
    </div>
  </template>

  <script>
//在实例外定义组件
    Vue.component("v-tab",
      {
        //封装的html结构写在template属性中
        template:"#first-template"
   })
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app2',
    });
  </script>

局部组件 （局部组件只能定义在组件中（实例中））每一个vue实例都是一个组件
【注意】局部组件中嵌套组件不能够在实例控制区域中使用 而应该在template（占位符）中使用
示例

 <div id ="app">
    <v-tab></v-tab>

    <!-- z-tab不能在这里使用 -->
    <!-- <z-tab></z-tab> -->
  </div>
  <!-- <div id ="app2">
    <v-tab></v-tab>
  </div> -->

  <!-- 占位符，并不会渲染到页面上 -->
  <template id="feature-template">
    <!-- 根元素有且只能有一个 -->
    <div>
      <h1>hello,vue</h1>
      <z-tab></z-tab>
    </div>
  </template>

  <!-- 
    局部组件只能用在定义的组件中。
   -->

  <script>
   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {},
    //组件定义在这个属性中，这里定义的组件只能在当前的vm中使用。
    components:{
      // 组件名：配置对象
      "v-tab":{
        template: '#feature-template',
        components:{
          "z-tab":{
            template:"<p>hello,2022</p>"
          }
        }
      }
    }
   });
   //创建Vue实例,得到 ViewModel
  //  var vm2 = new Vue({
  //   el: '#app2',
  //   data: {}
  //  });
  </script>