vue--ref属性

吴宇 2020-05-28 13℃ 0条

在普通的dom结构中,在元素上添加ref属性,this.$refs.ref获取的是具有这个ref属性的dom节点。在vue组件中,this.$refs.ref获取的是组件的实例,组件中的data可以直接this.$refs.ref.key获取数据。

      在说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属性:

  • 在普通的dom结构中,在元素上添加ref属性,this.$refs.ref获取的是具有这个ref属性的dom节点。
<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组件中,this.$refs.ref获取的是组件的实例,组件中的data可以直接this.$refs.ref.key获取数据。
<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>
标签: javascriptvue

非特殊说明,本博所有文章均为博主原创。