Vue组件化

Vue组件化

一、基础概念

1、概念：组件是html、css、js等的一个聚合体

2、为什么要使用组件？

• 组件化

• 将一个具备完整功能的项目的一部分进行多处使用
• 加快项目的进度
• 可以进行项目的复用

• 要想实现组件化，我们使用的这一部分必须是完整的，这个完整的整体称之为组件

3、vue将html、css、js、img等聚合体放在一起组成的文件称之为单文件组件，后缀名为vue（xxx.vue）

二、组件的创建

• 引入vue.js文件之后，会向全局暴露一个Vue构造器函数
• Vue.extend()是 vue 用来扩展 vue 功能（组件）的
• Vue.extend()实例化与new Vue()是一样的，几乎没有区别，所以借鉴react，vue决定组件要以标签的形式呈现
• 为了符合html/html5的规则，所有组件的标签化使用必须先注册（即创建）
• 说明白点注册就是将标签化的组件解析为html能识别的标签，因为自己创建的标签需要符合html规则，让html正确解析该组件标签
• 组件必须先注册再使用，使用是在实例范围内使用
• 组件名称可以小写加-命名 如：header-title
• 大驼峰 如：GabrielLi 使用的时候写gabriel-li （注册的时候写的是大写，使用的时候写小写加-，因为浏览器会自动将大写解析成小写）
• 一个单词大写，注意不要和原生的h5标签重名，比如 header footer

1、全局注册

<div id="app">
    <Father></Father>   <!-- 组件注册一次就可以在不同的实例中使用  -->
</div>
<div id="root">
    <Father></Father>   <!-- 组件注册一次就可以在不同的实例中使用  -->
</div>

//组件的创建：Vue.component( 组件的名称，组件的配置项 )  
var Hello = Vue.extend({
    template:'<div>这是father组件</div>'  
})
Vue.component('Father',Hello)  // 组件Father不能在实例范围外使用

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

2、局部注册

局部注册在组件中用一个components的配置项来表示，只能在注册的范围内使用，其他地方不能使用

<div id="app">
    <zhang-san></zhang-san>
</div>
    

var Hello = Vue.extend({
    template:'<div> 这里是组件 </div>'
})
new Vue({
	el:'#app',
    components:{
        'zhang-san':Hello  //key:value  key是组件名称  value是组件配置项
    }
})

3、简写

<div id="app">
    <gabriel-li></gabriel-li>   <!-- 输出结果为 “局部注册”  -->
    <Father></Father>   <!-- 输出结果为 “全局注册”  -->
</div>

Vue.component('Father',{
    template:'<div> 全局注册 </div>'
})
new Vue({
    el:'#app',
    components:{
        'GabrielLi':{
            template:'<div> 局部注册 </div>'
        }
    }
})

三、组件的嵌套

• 父组件里面放子组件，类似dom结构的父子级结构
• 将子组件以标签的形式放在父组件的模板中使用，千万不要放在父组件的内容中

<div id="app">
    <Father></Father>
</div>

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></Son></div>',
        components: {
          'Son': {
            template: '<div> son组件 </div>'   // son组件嵌套在father组件中
          }
        }
      }
    }
  })

四、组件的特殊使用规则

1、使用规则之is规则

• 如果直属父子级直接组件以标签化形式使用，会有bug

<div id="app">
    <table>
<!-- <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <Hello></Hello>   上述这种方法会有bug -->
      <tr is = "Hello"></tr>   <!-- 正确应该通过is来绑定组件 -->
    </table>
</div>

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

2、使用规则之template

1、实例范围内使用

• template中的内容被当做一个整体了，并且<template></template>标签是不会解析到html结构中的

<div id="app">
    <template>   <!--  template不会被解析在html结构中，中间的代码会被解析 -->
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </template>
</div>

Vue.component('Hello',{
    template: ''
  })
  new Vue({
    el: '#app'
  })

2、实例范围外使用

• 实例范围外template标签中的代码是不会被直接解析的

<div id="app">
<template>  <!--  该段代码会原样呈现在html结构中，不会被解析 -->
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>
</div>

Vue.component('Hello',{
    template: ''
  })
  new Vue({
    el: '#app'
  })

需要正确使用template，可以采用实例范围外方法，但是需要修改部分代码

<div id="#app">
  <Hello></Hello>  <!--  使用Hello组件 -->
  <template id="hello">   <!--但是使用第二种template使用后，有个弊端，`<template></template>`标签结构会在html文件中显示,解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件-->
    <div>
      	<ul>
        	<li>1</li>
        	<li>2</li>
     	 </ul>
    </div>
  </template>
</div>

Vue.component('Hello',{
    template: '#Hello'
  })
  new Vue({
    el: '#app'
  })