Vue-4

組件

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: {
                    組件名: 組件配置項
                  }
                })

1. 組件必須先註冊在使用
2. 組件中的模板須要使用一個叫作template的配置項表示
3. 組件的配置項能夠簡寫，不須要使用 Vue.extend(options),能夠直接將options寫在組件的註冊中
4. template組件中有且僅有一個根元素
5. 組件使用時有規則的：

• 好比特殊的一些標籤： 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>

1. 組件嵌套

• 全局註冊：
  • 要將子組件的組件名寫在父組件的template中
• 局部註冊：

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