1.is的使用

在h5中規(guī)定<table>標(biāo)簽里面包裹的必須是<tr>,如果像普通組件一樣在頁(yè)面上直接引用<row></row>,那么模板渲染出來(lái)的會(huì)出錯(cuò)栋盹，解決方法就是用is,類(lèi)似的標(biāo)簽還有<ul><li></li></ul>,<ol><li></li></ol>,<select><option></option></select>,都是通過(guò)is去解決

<table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
      </tbody>
    </table>

<script>
//注冊(cè)一個(gè)全局組件
 Vue.component('row', {
      data: function () {
        return {
          content: "this is rows"
        }
      },
      template: '<tr><td>{{content}}</td></tr>'
    })
</script>

2.ref,通過(guò)這個(gè)對(duì)dom進(jìn)行操作

在普通的html標(biāo)簽中,ref獲取的是標(biāo)簽對(duì)應(yīng)的dom元素父能，在組件中舀透，ref獲取的是子組件的引用,接下來(lái)可以對(duì)dom進(jìn)行一些操作

<div ref="hello" @click="handleClick">hello world</div>
<counter ref="one" @change="handleChange">0</counter>
<counter ref="two" @change="handleChange">0</counter>
<div>{{total}}</div>
<script>
Vue.component('counter',{
      template:'<div @click="handleNumberClick">{{number}}</div>',
      data:function(){
        return {
          number:0
        }
      },
      methods:{
        handleNumberClick:function(){
          this.number++
          this.$emit('change')
        }
      }
    })

    var vm = new Vue({
      el: "#app",
      data: {
        total:0
      },
      methods:{
        handleClick:function(){
         console.log( this.$refs.hello)//<div>hello</div>
        },
        handleChange:function(){
          console.log(this.$refs.one.number)//輸出counter里面的number
          console.log(this.$refs.two.number)//輸出counter里面的number
          this.total = this.$refs.one.number+this.$refs.two.number
        }
       
      }
    })
</script>

3.動(dòng)態(tài)組件和v-once

動(dòng)態(tài)組件<component></component>標(biāo)簽是vue底層自帶的標(biāo)簽贿讹，可以按需加載組件，v-once可以讓組件只加載一次

<div id=app>
    <component :is="show"></component>
    <p><button @click="handleClick">change</button></p>
  </div>

  <script>

    Vue.component('child-one', {
      template: `<div v-once>child-one</div>`
    })

     Vue.component('child-two', {
      template: `<div v-once>child-two</div>`
    })

    var vm = new Vue({
      el: "#app",
      data:{
        show:'child-one'
      },
      methods:{
        handleClick:function(){
         // alert('1')
         console.log(this.show)
        //  this.show = this.show ==='child-one' ? 'child-two' : 'child-one'
          if(this.show==='child-one'){
            this.show='child-two'
          }else{
            this.show='child-one'
          }
        }
      }
    })
  </script>