vue ref

vue ref

// ▆ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上：▆如果在普通的dom元素上使用，引用指向的就是dom元素，▆如果用在子组件上，引用就指向组件实例,▆ref可以使用，修改子组件的属性，值，调用子组件的方法
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p> 

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

//▆当v-for用于元素或者组件的时候，引用信息将是包含dom节点或组件实例的数组
//关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问他们，他们还不存在；$refs也不是响应式的，▆因此你不应该视图用它在模板中做数据绑定

<div ref="msg">Node</div>
console.log(this.$refs.msg); // <div>Node</div> // DOM元素

<router-view ref="formBox"></router-view>
console.log(this.$refs.formBox); // VueComponent {_uid: 1, ...} // 组件实例

 <div ref="msg" v-for="index in 3" :key="index">{{ index }}</div>
console.log(this.$refs.msg); // (3) [div, div, div] // DOM元素数组

// ▆$nextTick方法
//在初始化访问ref时，应该在其声明周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或者实例，此外一般不推荐直接操作dom元素，尽量使用数据绑定让mvvm的viewModel去操作dom

<div ref="msg"> {{ msg }}</div>
<button @click="updateMsg">button</button>
data(){
    msg: 0,
}
mounted(){
   console.log(this.$refs.msg)//<div> 0</div>
}
updateMsg() {
  this.msg = 1
  console.log(this.$refs.msg.innerHTML) //0
  this.$nextTick(() => { 
    console.log(this.$refs.msg.innerHTML) //1
  })
}