component

component

原理

• Vue是构造器函数
• Vue.extend()是vue用来扩展vue功能（ 组件 ）的
• Vue决定不进行实例化Vue.extend(),vue借鉴了react，react中组件是以标签的形式使用的
• vue决定组件要以标签的形式呈现
• 为了符合 html / html5的规则，所以组件的标签化使用必须注册（要不谁认识这都是啥）
• 注册说白了就是用来解析这个标签化的组件为html能识别的标签
• 先注册后使用

<div id="app">
    <Father></Father>
  </div>
new Vue({
    el: '#app'
  })

组件的创建

• Vue.component( 组件的名称，组件的配置项 )

Vue.extend()        options
 Vue                 options
 这两个options基本一样
console.log(Vue)
console.log(Vue.extend())
组件必须先注册再使用（实例（组件）范围内使用）
<div id="app">
   <Father></Father>
 </div>
 
 <div id="root">
   <Father></Father>
 </div>

var Hello = Vue.extend({
   template: '<div> 这里是father组件 </div>'
 })             //VueComponent( option )

 Vue.component( 'Father', Hello )

 new Vue({
   el: '#app'
 })


 new Vue({
   el: '#root'
 }) 

局部注册

• 命名：一个单词的大写：注意不要和原生的H5标签重名，比如 header footer
  小写带-，比如 header-title
  大驼峰：MingLiang使用的时候：ming-liang
• 局部注册：在组件中用一个component的配置项目来表示，只能在注册的范围内使用，其他地方是不能使用的。
• 例如：

<div id="app">
    <ming-liang></ming-liang>
  </div>

  <div id="root">
      <ming-liang></ming-liang>
  </div>

var Hello = Vue.extend({
    template:'<div>杭州</div>'
})

new Vue({
    el:'#app',
    component:{
        //key:value key是组件名称，value是组件配置项
        'MingLiang':Hello
    }
})

new Vue({
    el:'#root'
})

简写

<div id="app">
    <Father></Father>
    <ming-liang></ming-liang>
</div>
<script>
Vue.component('Father',{
    template:'<div>这里是全局注册</div>'
})

new.Vue({
    el:'#app',
    component:{
        'MingLiang':{
            template:'<div>这里是局部注册</div>'
        }
    }
})
</script>

组件的嵌套

• 父组件里面放子组件—》类似于dom结构的父子级结构，将子组件一标签的模式放到父组件的末班中使用，切记不要放到父组件的内容中
• 组件不仅可以用双标签表示，也可以使用单标签表示

<div id="app"></div>
<!--下面的这种写法是错误的-->
<Father>
<Son></Son></Father>
<!--正确的应该是-->
<Father></Father>

Vue.component('Father',{
    template:'<div>Father<Son></Son><div/>'
})

Vue.component('Son',{
    template:'<div>son</div>'
})
new Vue({
    el:'#app'
})

还有另外一种写法
new Vue({
    el:'#app',
    components:{
        'Father':{
            template:'<div>father组件<Son/></div>',
            components:{
                'Son':{
                    template:'<div>son组件</div>'
                }        
            }
        }       
    }
})

is规则

• 有以下几个关系（ul>li ol>li table>tr>td select>option）
• 如上直属父子级如果直接组件以标签化的形式使用，那么会出现bug，会调到父级标签之外。
• 解决：使用is规则：通过is属性来帮顶一个组件

- 案例

<div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr is = "Hello"></tr>
    </table>
  </div>

  Vue.component('Hello',{
      template:'<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
  })

  new Vue({
      el:'#app'
  })

template使用：

1. 实例范围内使用
   template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
2. 实例范围外使用
   实例范围外template标签是不会被直接解析的

• 组将想要使用template的话，要在实例外面使用，只是这里会有一个弊端，template标签结构会在html文件中显示
• 解决：使用webpack、gulp等工具编译，将来要用vue提供的单文件组件。

<div id="app">
    <h3> 实例范围内使用 </h3>
    <template>
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </template>


    <h3> 使用 hello  组件</h3>

    <Hello></Hello>

  </div>
  <h3> 实例范围外使用 </h3>
  <template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>

 Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  }) 

• 这模板代码写着是不是爽多了。