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 方法来获取

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

ref使用

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

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

效果:

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

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

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

组件

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

添加组件

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

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

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

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

效果:

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

再加一个函数:

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

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

效果:

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