Vue入门到放弃24(vue获取DOM元素和组件--ref和$refs的使用)

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

$refs

   $refs 是一个对象，持有已注册过 ref 的所有的子组件。

普通方式

  我们先通过 getElementById 方法来获取

ref使用

  接下来我们通过 ref 属性来试试。

效果：

 $refs属性，该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象

组件

   ref 也可以作用在组件中，我们来看下效果

添加组件

  先来添加一个自定义的组件

效果：

再加一个函数：

效果：