Vue中ref的使用

Vue中ref的使用

ref的使用:

获取dom节点

1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2. 加上ref之后，在$refs属性中多了这个元素的引用。
3. 通过vue实例的$refs属性拿到这个dom元素。

获取组件

4. 给组件记上ref属性，可以理解为给组件起了个名字。
5. 加上ref之后，在$refs属性中多了这个组件的引用。
6. 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

举例

<div id="app">
  <!-- 1、获取DOM元素 -->
  <div id="box" ref="box">just do it</div>
  <!-- 2、获取组件 -->
  <cmpt ref="com"></cmpt>
  </div>
  mounted() {
  console.log(this.$refs);
  console.log(this.$refs.box);
  console.log(this.$refs.com);
  this.$refs.box.style.color = "blue";
  this.$refs.com.log();
},