vue--ref屬性

在說vue的ref屬性以前，先說一下vue中的is屬性

在寫table的時候，有可能會想說把每個tr當作一個子組件，像下面這樣

<div id="app">
        <table>
            <row></row>
            <row></row>
            <row></row>
        </table>
    </div>

    <script>
        Vue.component('row',{
            data() {
                return {
                    content:'the property of is in vue.'
                }
            },
            template: '<tr><td>{{content}}</td></tr>'
        })

        var vm = new Vue({
            el: '#app'
        })
    </script>

可是這樣寫會出現問題，像下面這張圖同樣，tr並無在table裏面，按照html的語義來講，table下的元素應該是tbody,thead,tr這種，因此寫row會出現這種問題

那改爲<tr is="row"></tr>這種寫法的時候就能夠避免這個問題

接下來開始說vue中的ref屬性：

1.在普通的dom結構中，在元素上添加ref屬性，this.$refs.ref獲取的是具備這個ref屬性的dom節點

2.在vue組件中,this.$refs.ref獲取的是組件的實例，組件中的data能夠直接this.$refs.ref.key獲取數據

第一種：在dom節點上的ref屬性

    <div id="app">
        <div ref="container" @click="handlerClick">{{content}}</div>
    </div>

    <script>
        //在dom節點上
        var vm = new Vue({
            el: '#app',
            data: {
                content: 'the property of ref in vue.'
            },
            methods:{
                handlerClick: function(){

                    //獲取的是ref="container"的dom節點，能夠對其進行想作的操做
                    console.log(this.$refs.container)                     
                }
            }
        })
    </script>

第二種：在vue組件上的ref屬性

    <div id="root">
       <counter ref="one" @change="toTotal"></counter>
       <counter ref="two" @change="toTotal"></counter>
       <div>totoal:{{total}}</div>
    </div>

<script>

        // 全局組件counter
        Vue.component('counter',{
            data(){
                return {
                    number: 0
                }
            },
            template: '<div @click="handlerCounter">{{number}}</div>',
            methods: {
                handlerCounter: function() {
                    this.number ++
                    this.$emit('change') //子組件向父組件傳值

                }
            }
        })

        var vm1 = new Vue({
            el: '#root',
            data: {
                total: 0
            },
            methods: {
                toTotal: function() {

                    //這裏獲取的是counter組件的實例，實例裏面的data能夠直接用.來獲取
                    console.log(this.$refs.one)

                    //計算total的值                     this.total = this.$refs.one.number + this.$refs.two.number                 }             }         })     </script>