今天在从vue2升级vue3的时候，遇到了这个问题，下面说一下这些怎么表示
vue2中的this.$el其实就是获取当前的组件节点，让我们来看一下代码和输出
在vue2中我们有组件：
<template><div class="aaa"><div class="block"><span class="demonstration">完整功能</span></div></div>
</template><script>
export default {name: '',data() {return {}},mounted() {console.log(this.$el, 'this.$el')},
}
</script><style lang="" scoped></style>
看一下输出是什么
通过 class="aaa" 可以看见输出就是当前模板标签内的根标签
所以在 vue3 中我们可以通过在 ref 的方式获取到根标签，代码如下
<script setup lang="ts">
import { ref } from 'vue'
const ownInstance = ref(null)console.log(ownInstance, 'ownInstance')
</script>
<template><div ref="ownInstance" class="aaa"><div class="block"><span class="demonstration">完整功能</span></div></div>
</template><style lang="less" scoped></style>
之后我们在看一下 vue2 里面的 this.$parent 输出的是什么
输出的是它的父组件，我们在vue3中获取父组件是这样的
import { getCurrentInstance } from 'vue'const instance = getCurrentInstance()console.log(instance.parent)让我们来看一下输出是什么样子的
这里要注意的是，当需要使用父组件里面的一些方法或者数据时，需要在 exposed 里面使用
然后在说一下 this.$children,在vue2中，this.$children 就是获取子组件的实例，vue3 我们可以通过 ref 获取
<template><ChildComponent ref="childRef" />
</template><script lang="ts">
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)onMounted(() => {// 访问子组件实例console.log(childRef.value)
})
</script>
但是有个地方我们注意一下：
当在 vue2 根据 this.$children 获取到的子组件是一个数组，而在 vue3 中通过 ref 获取到的子组件，如果只有一个 ref=xxx,获取到的 xxx 就是一个子组件实例，当有多个 ref=xxx 的时候，获取到的才是数组，下面来看一下详细的
vue2只有一个子组件时：
<template><div class="aaa"><div class="block"><span class="demonstration">完整功能</span><testxxx></testxxx><!-- <testxxx v-for="i in 3" :key="i"></testxxx> --></div></div>
</template><script>
import testxxx from './testxxx.vue'
export default {name: '',components: { testxxx },data() {return {}},mounted() {console.log(this.$children, 'this.$children')},
}
</script><style lang="" scoped></style>
vue2有多个子组件时：
vue3只有一个子组件时：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import trimxxx from './trimxxx.vue'
const childRef = ref(null)onMounted(() => {// 访问子组件实例console.log(childRef.value)
})
</script><template><!-- <trimxxx ref="childRef" /> --><trimxxx ref="childRef" v-for="i in 3" :key="i" />
</template><style scoped></style>
vue3有多个子组件时：
