Vue如何获取指定元素的方法

Vue 是一个构建用户界面的渐进式框架，它可以帮助开发者更加高效地开发出功能丰富的 web 应用程序。Vue 提供了一种简单的方法来获取指定元素，可以使用 $refs 属性来获取 DOM 元素或子组件。

使用 $refs 获取 DOM 元素

// 在 HTML 中添加 ref 属性

  



// 在 JavaScript 中访问 ref
const app = new Vue({
  el: '#app',
  data: {},
  methods: {},
  mounted() {
    console.log(this.$refs.myDiv) // 获取 DOM 元素
  }
})

使用 $refs 属性，可以在 Vue 实例中访问 DOM 元素，这样就可以对 DOM 元素进行操作，比如改变元素的样式，添加事件等。

使用 $refs 获取子组件

// 在 HTML 中添加 ref 属性

  


// 在 JavaScript 中访问 ref
const app = new Vue({
  el: '#app',
  components: {
    ChildComponent
  },
  data: {},
  methods: {},
  mounted() {
    console.log(this.$refs.child) // 获取子组件实例
  }
})

使用 $refs 属性，可以在 Vue 实例中访问子组件，这样就可以对子组件进行操作，比如调用子组件的方法，改变子组件的属性等。

Vue 提供了一种简单的方法来获取指定元素，可以使用 $refs 属性来获取 DOM 元素或子组件，这样可以让开发者更加高效地开发出功能丰富的 web 应用程序。