ref、refs、nextTick()

ref、refs、nextTick()

ref、refs：

// 组件div
<navbar ref="navbar></navbar>
// 组件
Vue.component('navbar',{
    template:'#navbar',
    data:function () {
        return {
            id:1,
        }
    }
});

// 父页面取navbar组件中的id
this.$refs.navbar.id   // 1

nextTick()：

想获取Dom更新的数据，使用this.$nextTick，更新循环结束之后执行延迟回调，获取更新后的 DOM。

<div ref="p">{{ name }}</div>
<script>
  var vm = new Vue({
    data:{
      name:'小小陶先森'
    }
  }).$mount("#app")

  vm.name='taohang';
  console.log(vm.$refs.p.textContent);  // 小小陶先森
  vm.$nextTick(function () {
    console.log(vm.$refs.p.textContent);  // taohang
  })
</script>