vue ref的用法

ref介绍

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

一、Dom

　　1、获取dom元素（作用与id相似）

　　　　eg:    <div ref=“testDom”>111</div>

　　　　获取：this.$refs.testDom

二、组件

　　1、获取子组件的data

　　　　Eg:   <Helloword ref=“testDom”></Helloword>

     　　 在父组件上引用子组件DOM上定义一个ref,直接this.$refs.testDom.msg;即可获取到

　　2、调用子组件的方法

　　　　Eg:   <Helloword ref=“testDom”></Helloword>

      　　在父组件上饮用子组件DOM上定义一个ref,直接this.$refs.testDom.initData();即可获取到

　　注：子组件传值给父组件的另一种方法：

　　　　Eg:    父组件：<Helloword ref=“testDom” @refreshData=“getData”></Helloword>

  　　　　　　　　　　　　getData(){console.log("子组件传过来的值")}

  　　　　　　子组件：open(){

　　　　　　　　　　　　　　　　 console.log(“调用啦”)

　　　　　　　　　　　　　　　　 this.$emit(“refreshData”);

 

　　　　　　　　　　　　　　}

注意： $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定