vue3 ref获取组件实例详细图文教程

<!--tempaleteb标签的内容-->
<!-- 注意：ref前面不能有冒号 -->
? ? <h1 ref="title">我是标题</h1>
? ? <child ref="child"></child>? ? ? ? ? ? ?
//setup函数内的内容
?// 通过ref获取组件实例
? ? const child = ref(null)
? ? const title = ref(null)
//挂载完成后获取实例
? ? onMounted(() => {
? ? ? ? console.log(child.value)
? ? ? ? console.log(title.value)
? ? ? ? child.value.hh()
? ? })

<template>
<div>我是描述</div>
<h3>我是标题</h3>
</template>
<script>
export default {};
</script>
<style></style>

<template>
? <div class="app">
? ? <Suspense>
? ? ? <template v-slot:default>
? ? ? ? <Child />
? ? ? </template>
? ? ? <template v-slot:fallback>
? ? ? ? <h1>加载中...</h1>
? ? ? </template>
? ? </Suspense>
? </div>
</template>
<script>
// import Child from './Child.vue'; // 程序开始就会打包编译
// 导入defineAsyncComponent 方法 定义异步加载组件
import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("./Child.vue"));
export default {
? components: {
? ? Child,
? },
};
</script>
<style scoped>
.app {
? background-color: #eee;
? padding: 30px;
}
</style>

<template>
<div class="child">我是子组件</div>
</template>
<script>
export default {};
</script>
<style scoped>
.child {
border: 2px solid red;
margin: 20px;
padding: 20px;
}
</style>

<template>
<div class="dialog">我是弹框</div>
</template>
<script>
export default {};
</script>
<style scoped>
.dialog {
width: 300px;
height: 300px;
padding: 30px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>

<template>
  <div class="app">
    <h3>我是标题</h3>
    <h1>我是一级标题</h1>
    <div id="test">
      <!-- to属性的值为选择器，表示放在哪个节点下面 -->
      <teleport to="body">
        <Dialog />
      </teleport>
    </div>
  </div>
</template>
<script>
import Dialog from "./Dialog.vue";
export default {
  components: {
    Dialog,
  },
};
</script>
<style scoped>
.app {
  background-color: #eee;
  padding: 30px;
}
</style>