06. Vue.js【组件】

Vue.js【组件】

1.组件的概念

1.组件【Component】是 Vue.js 最强大的功能之一.
2.组件可以扩展 HTML 元素，封装可重用的代码。

2.组件的注册

1.Vue中的组件属于扩展性功能是通过 Vue.extend() 来扩展的.
2.我们希望组件是以标签的形式展示，但是ES5不会允许这样的盗版标签，
    所以组件标签想要合规化，必须进行注册.
  
<div id="app">          //ROOt根组件
    <Hello></Hello>
    <Hello/>
</div>

<script>  
//1.组件的选项
var Hellow=Vue.extend({
  template:'<div> hello </div>'
})
//2.组件的注册
Vue.component('Hello',Hellow)
new Vue({
  el:'#app'
})

//↓简写模式【全局注册】(component组件放在ROOT根组件外，组件全局有效)
  Vue.component('Hello',{       
    template: '<div> hello </div>'
  })

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

//↓简写模式【局部注册】(component组件放在ROOT根组件内，组件只能在实例内部有效)
new Vue({
    el: '#app',
    components: {               //component变成复数+s
      'Hello': {
        template: '<div> hello </div>'
      }
    }
  })
</script>

3.内容模板template组件

1. 内容模板template组件可以直接放在DOM结构body中，方便书写DOM结构时提示.
2. 但template标签放在ROOt根组件外层时是不会被解析的，也就是会在dom结构中出现,
如果放在ROOt根组件内，会被解析，将来不会出现在dom结构中
3. template中直接子元素必须有且仅有一个.
<body>
  <div id="app">            //ROOt根组件
    <Hello></Hello>
                      
    <template>                      
      <p> 实例内 </p>          //会被解析，不会出现在DOM结构中
    </template>
                      
  </div>

  <template id="hello-box"> //通过ID选择器引入在body中，方便书写DOM结构
    <div> 实例外 </div>            //不会被解析，会出现在DOM结构中
  </template>
  
</body>
<script>

  
  Vue.component('Hello',{       //全局注册组件
    template: '#hello-box'  //template用一个ID选择器引到body中方便书写
  })

new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    }
  })   
</script>

3.组件的命名规则

<div id="app">              
    <Hello></Hello>
    <header-title></header-title>
    <movie-list></movie-list>    
</div>

<script>
  Vue.component('Hello',{                   
    template: '<div> hello </div>'
  })        //首字母大写
  
  Vue.component('HeaderTitle',{              
    template: '<div> HeaderTitle </div>'
  })        //大驼峰命名
  
  Vue.component('movie-list',{              
    template: '<div> 电影列表 </div>'
  })        //横杠命名
  
  new Vue({
    el: '#app'
  })  
</script>

4.组件的使用规则

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

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

5.动态组件【点击切换】

// 知识点： is 属性  +  动态组件 component + 动态缓存组件  keep-alive
<div id="app">
     <button @click = " comp = comp === 'UserLogin'? 'PhoneLogin':'UserLogin'">
         切换
      </button>
   
  <keep-alive>      //动态缓存，Vue内部组件
    <component :is = "comp"></component>  
   </keep-alive>
  
</div> 
<script>
 Vue.component('UserLogin',{
   template: '<div> 用户名密码登录 </div>'
 })
   
 Vue.component('PhoneLogin',{
   template: '<div> 短信验证码登录 </div>'
 })

new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'         //赋值保存组件名，类似中转站，用于切换组件名
    }
  })  
</script

6.组件嵌套【父子组件】

body>   
  <div id="app">                //ROOt根组件
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是father组件 </h3>
      <Son></Son>
    </div>
  </template>

  <template id="son">
    <div>
      <h4> 这里是子组件 </h4>
    </div>
  </template>
</body>

<script>
     // ↓全局注册
   /* 将子组件以标签的形式在父组件的模板使用 */

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

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

  new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    }
  })    
</script>


<script>
  // ↓局部注册
  /* 将子组件在父组件中注册*/
  new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    },
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })   
</script>