Vue组件知识详解及应用

什么是组件?

1. Vue.js通过Vue.extend() 方法来扩展 组件的 使用
   2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
   3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
   4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
   5. 组件的注册有两种形式

全局注册

      格式： Vue.component(组件的名称，组件的配置项)
        组件的命名规则
          举例：
                1. Father Hello 
                2. my-button

局部注册

 格式： 
          写在组件内注册
          举例： 
            new Vue({
              componens: {
                组件名: 组件配置项
              }
            })

6. 组件必须先注册在使用

7. 组件中的模板需要使用一个叫做template的配置项表示

8. 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中

9. template组件中有且仅有一个根元素
   10. 组件使用时有规则的：
   比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题
   解决： 在直接子元素身上，通过 is 属性来 绑定 一个组件

       举例： 
       <table>
         <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
         </tr>
         <!-- <Hello></Hello>  这么写有问题-->
         <tr is = "Hello"></tr>
       </table>
   

   11. 组件嵌套
       全局注册：
       要将子组件的组件名写在父组件的template中
       局部注册

    ```html
       <div id="app">
       <Father></Father>
        </div>
       <template id="father">
          <div>
         <h3>  father </h3>
         <hr>
         <Son></Son>
         </div>
        </template>
        <template id="son">
       <h3> son </h3>
       </template>
       ```
   

     Vue.component('Father',{
        template: '#father'
        })
        Vue.component('Son',{
        template: '#son'
        })
       new Vue({
       el: '#app',
       })