vue中$refs、$slot、$nextTick相关的语法

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

1、$data和$el

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

2、$refs

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

     <div id="app">
            <p ref="header">头部</p>
            <son ref='son'></son>
            <div ref="footer">尾部</div>
        </div>
        <template id="son">
            <div>{{msg}}</div>
        </template>
       var son = {
                template:'#son',
                data(){
                    return {
                        msg:'子组件数据'
                    }
                },
            }
            var vm = new Vue({
                el:'#app',
                components:{
                    son
                },
                mounted(){
                        console.log(this.$refs.header)  //<p ref="header">头部</p>
          } 
       })

3、$nextTick() 处理异步更新数据

       var son = {
                template:'#son',
                data(){
                    return {
                        msg:'子组件数据'
                    }
                },
                mounted(){
                    this.msg='更改后数据'
                }
            }
            var vm = new Vue({
                el:'#app',
                components:{
                    son
                },
                mounted(){
                    console.log(this.$refs.son.$el.innerHTML) //子组件数据
                    this.$nextTick(()=>{
                        console.log(this.$refs.son.$el.innerHTML)   //更改后数据
                    })
                }
            })

 

转载于:https://www.cnblogs.com/bing0709/p/10785061.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值