淘先锋技术网

首页 1 2 3 4 5 6 7

在Vue中,我们经常需要查找dom元素或者组件实例,这时候就需要使用Vue提供的查找工具。

vue查找

常用的查找方法有两种:通过ref获取组件实例和通过$refs获取组件实例。下面我们一一介绍:

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

<script>
export default {
  mounted() {
    // 通过ref获取组件实例
    const myComponent = this.$refs.myComponent;
    console.log(myComponent);
  }
}
</script>

上面的例子中,我们在组件内使用了ref="myComponent",然后在mounted生命周期中通过this.$refs.myComponent获取了组件实例。

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

<script>
export default {
  mounted() {
    // 通过$refs获取组件实例
    const myComponent = this.$refs["myComponent"];
    console.log(myComponent);
  }
}
</script>

使用$refs获取组件实例的方法与通过ref获取组件实例非常类似,只是在$refs中需要使用引号包裹字符串。

除了查找组件实例,Vue还提供了许多其他的查找工具,比如$parent、$root、$children等,具体使用方法可以查看Vue官方文档。