Vue3中获取子组件的常用方式有三种：ref、$refs和$children。 ref ref是一个指令，可以用来为组件指定一个引用名。在Vue3中，ref可以被用在任何元素上，不仅限于组件，这样就可以方便地访问到组件的实例。使用ref的示例代码如下： template div Child ref="child"/ /div/templatescriptimport Child from './Child.vue'export default { components: { Child }, mounte […]

Vue3中获取子组件的常用方式有三种：ref、$refs和$children。

ref

ref是一个指令，可以用来为组件指定一个引用名。在Vue3中，ref可以被用在任何元素上，不仅限于组件，这样就可以方便地访问到组件的实例。使用ref的示例代码如下：

<template>
  <div>
    <Child ref="child"/>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted () {
    console.log(this.$refs.child)
  }
}
</script>

$refs

$refs是Vue实例的一个属性，它是一个对象，用来保存组件的引用名。使用$refs的示例代码如下：

<template>
  <div>
    <Child ref="child"/>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted () {
    console.log(this.$refs.child)
  }
}
</script>

$children

$children是Vue实例的一个属性，它是一个数组，用来保存所有的子组件实例。使用$children的示例代码如下：

<template>
  <div>
    <Child/>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted () {
    console.log(this.$children[0])
  }
}
</script>

来说，Vue3中获取子组件的常用方式有三种：ref、$refs和$children。ref可以用来为组件指定一个引用名，$refs可以用来保存组件的引用名，而$children则可以用来保存所有的子组件实例。

说点什么吧

• 全部评论（0）
• 最新 最早

还没有评论，快来抢沙发吧！