vue-组件

组件

组件化

1. 组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行

组件的基础

1. 组件是一个具备html css img js …等的一个聚合体
2. 组件的表现形式就类似一个标签
3. 组件至少得有模板

全局注册和局部注册

1. Vue.js通过Vue.extend() 方法来扩展 组件的 使用
2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的 
3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 '根实例组件' ，叫 'Root' 组件
4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册 
5. 组件的注册有两种形式
      1. 全局注册
      2. 局部注册
6. 组件必须先注册在使用
7. 组件中的模板需要使用一个叫做template的配置项表示
8. 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
9. template组件中有且仅有一个根元素
10.  组件使用时有规则的：
    比如特殊的一些标签：ul li ol li table tr td  dl dt dd select option... 这类型标签，是规定了它们的直接子元素,
    当我们将组件写入这类型标签的时候,就会发现有问题

        解决： 在直接子元素身上，通过 is 属性来 绑定  一个组件

        举例：
        ```html
          <table>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
            <!-- <Hello></Hello>  这么写有问题-->
            <tr is = "Hello"></tr>
          </table>
        ```
11. 组件嵌套
        全局注册： 
          要将子组件的组件名写在父组件的template中
        局部注册

1. 全局注册 (实例)

   <div id="app">
     <Father></Father>
   </div>

 //  1. 组件的配置项
 // const Father = Vue.extend({
 //     template: '<div>zs,li,ww</div>'
 // })
 // 2. 组件的注册
 // Vue.component( 'Father', Father )// Vue.component(组件的名称，组件的配置项)
 // 3. 组件简写方式
   Vue.component( 'Father', {
       template: '<div>12312312321</div>'
   })
   //4. 组件的使用
   new Vue({
       el: '#app'
   })

1. 局部注册 （实例）
   格式：
   写在组件内注册
   举例：
   new Vue({
   componens: {
   组件名: 组件配置项
   }
   })

 <div id="app">
     <Father></Father>
 </div>

  new Vue({
     el: '#app',
     components: {
         'Father': { //要遵守一个子集原则 很重要!!! div就是唯一子集
             template: `<div>
                         123
                         <i>aaa</i>
                        </div>
                       `
         }
     }
 })

组件的嵌套（全局/局部）

    <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3>father</h3>
            <p>分割线</p>
            <Son></Son>
        </div>
    </template>
    <template id="son">
         <div>
            <h3>son</h3>
            <p>分割线2</p>
        </div>  
    </template>

    // 1. 全局嵌套
    Vue.component('Father', {
        template: '#father'
    })
    Vue.component('Son', {
        template: '#son'
    })

  // 2. 局部嵌套
    new Vue({
        el: '#app',
        components: {
            'Father': {
                template: '#father',
                components: {
                    'Son': {
                        template: '#son'
                    }
                }
            }
        }
    })