组件化

  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的配置项表示


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

9.template组件中有且仅有一个根元素

10
组件使用时有规则的:
比如特殊的一些标签: ul li ol li table tr td dl dt dd select option …这类型标签,是规定了它们的直接子元素,当我们将组件写入这类型标签的时候,就会发现有问题

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

        举例:` 
1 2 3
`

11.组件嵌套
全局注册: 以下举例

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

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

你可能感兴趣的:(组件化)