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'
          }
        }
      }
    }
  })