Vue: ref 和 $refs

1.1 ref和$refs

1.作用

利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例

2.特点：

查找范围 → 当前组件内(更精确稳定)

3.语法

3.1 获取dom：

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 refs.chartRef 获取

mounted () {
  console.log(this.$refs.chartRef)
}

3.2 获取组件：

1. 目标组件 – 添加 ref 属性

<BaseForm ref="baseForm"></BaseForm>

2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

4.注意

之前只用document.querySelect('.box') 获取的是整个页面中的盒子

5.代码示例

1. 获取dom

<p ref="abc">这是Test组件中的p标签</p>
mounted() {
  // document.querySelector是在整个页面中找元素
  // document.querySelector('p').style.color = 'red'
  // $refs获取当前组件内
  this.$refs.abc.style.color = 'blue'
  // 1.如果组件中，多个元素有相同的ref值，this.$refs.xxx只找最后一个
  // 2.循环出来之后，多个元素有相同的ref值，this.$refs.xxx找到全部
}

2. 获取组件，调用个方法

<MyForm ref="myform"></MyForm>
<button @click="$refs.myform.resetForm()">重置</button>

methods: {
  // 清空方法
  resetForm() {
    this.uname=this.phone = ''
  }
},