vue--ref属性

2019独角兽企业重金招聘Python工程师标准>>>

在说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>

转载于:https://my.oschina.net/u/3229305/blog/1820260