vue3没了$children，如何获取子组件？？？

最新推荐文章于 2024-03-20 14:57:57 发布

gtLBTNq9mr3

最新推荐文章于 2024-03-20 14:57:57 发布

阅读量1.3k

点赞数

文章标签： vue js javascript java web

原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODY0ODM2Ng==&mid=2247488936&idx=1&sn=c7c32ddbf31524b609c1821d75f6ddb6&chksm=eaed3f69dd9ab67f9c8b47ac0a416ce42e82ca30c1aa5db13e2158138af64563788d5926a644&scene=126&&sessionid=0

版权

Vue3 $children $refs 子组件 onMounted

关键词由CSDN通过智能技术生成

vue3没了$children，如何获取子组件？？？

$children 移除

概览

$children 实例 property 已从 Vue 3.0 中移除，不再支持。

2.x 语法

在 2.x 中，开发者可以使用 this.$children 访问当前实例的直接子组件：

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <my-button>Change logo</my-button>
  </div>
</template>


<script>
import MyButton from './MyButton'


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

3.x 更新

在 3.x 中，$children property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 $refs。

<template> 
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <my-button ref="root">Change logo</my-button>
  </div>
</template>


<script>
  import { ref, onMounted } from 'vue'


  export default {
    setup() {
      const root = ref(null)


      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // [VueComponent]
      })


      return {
        root
      }
    }
  }
</script>