vue----03

1、组件使用中的细节点

　　1.1 使用is解决某些情况下显示错误问题

<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
            
        </tbody>
    </table>
</div>

<script>
    Vue.component('row',{
        template: '<tr><td>this is a row</td></tr>'
    })

    var vm  = new Vue({
        el:"#root",
        data: {
            
        },
        methods: {
           
        }
    })
</script>

　　2、 

<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
            
        </tbody>
    </table>
</div>

<script>
    Vue.component('row',{
        data: function() {
            return{
                content: 'this is a row'
            }
        }
        template: '<tr><td>{{content}}</td></tr>'
    })

    var vm  = new Vue({
        el:"#root",
        data: {
            
        },
        methods: { 
           
        }
    })
</script>

3、ref 的使用

<div id="root">
   <counter ref="ont" @change="handleChange"></counter>
   <counter ref="two" @change="handleChange"></counter>
   <div>{{total}}</div>
</div>

<script>
    Vue.component('counter',{
        template: '<div @click="handleClick">{{number}}</div>',
        data: function() {
            return{
                number: 0
            }
        },
        methods: {
            heandleClick:function() {
                this.number++
                this.$emit('change')
            }
        }
    })

    var vm  = new Vue({
        el:"#root",
        data: {
          total: 0  
        },
        methods: { 
           handleChange: function() {
                this.total = this.$refs.one.number + this.$refs.two.number;
                
           }
        }
    })
</script>