vue3?ref獲取組件實例詳細圖文教程

更新時間：2023年10月09日 09:37:15 作者：鯨落_Libra

在Vue3中可以使用ref函數來創(chuàng)建一個響應式的變量,通過將ref函數應用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關于vue3?ref獲取組件實例的詳細圖文教程,需要的朋友可以參考下

1.ref獲取組件實例時前面不要寫冒號

需要注意的是通過ref拿到組件的屬性或方法必須是子組件return出來的

具體如下

<!--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()
? ? })

效果圖如下

2.組件介紹

Fragment 組件

在 vue2.x 中組件模板必須要一個根標簽；但是在 vue3.x 中不再需要一個根標簽，它會自動創(chuàng)建一個 Fragment

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

3.Suspense 組件

加載異步組件的時候，渲染一些其他內容

App.vue

<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>

child.vue

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

4.Teleport 組件

作用：將指定 DOM 內容移動到指定的某個節(jié)點里面（可以理解為將組件掛載到指定節(jié)點上面）使用場景：彈框、播放器組件的定位

dialog.vue

<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>

app.vue

<template>
  <div class="app">
    <h3>我是標題</h3>
    <h1>我是一級標題</h1>
    <div id="test">
      <!-- to屬性的值為選擇器，表示放在哪個節(jié)點下面 -->
      <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>

運行結果