建置生產堆疊：Docker、Meilisearch、NGINX 和 NestJS

介紹

如果您習慣了 Vue 2，您可能還記得每個組件的模板都需要一個根元素。在 Vue 3 中，由於片段的存在，這不再是必要的。這意味著您的組件現在可以擁有多個根元素，而無需包裝器。

<!-- Vue 2 -->
<template>
  <div> <!-- wrapper ? -->
    <h1 id="My-Blog-Post">My Blog Post</h1>
    <articlecomponent>{{ content }}</articlecomponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1 id="My-Blog-Post">My Blog Post</h1>
  <articlecomponent>{{ content }}</articlecomponent>
</template>

這與 React 中的 Fragment 非常相似。然而，Vue 在幕後處理片段。事實上，在Vue 3中，你可以想到

ref() 問題

在 Vue 2 中，我們可以輕鬆地在子元件上設定 ref，它將引用 包裝元素 和 元件實例 。

但是在Vue 3中，當沒有包裝元素時，ref指的是什麼呢？ ？

如果子組件使用Options API或不使用，則ref將指向子組件的this，從而賦予父組件完全訪問權限它的屬性和方法。

如果我們使用會怎麼樣？

使用的元件預設是私有。要公開屬性，我們需要使用 DefineExpose 巨集。

接觸兒童元素

• 這就是當你有包裝器（單根）元素時會發生的情況：

<!-- Child -->
<template>
  <div>



<ul>
<li>And when you have more than one root:
</li>
</ul>

<pre class="brush:php;toolbar:false"><!-- Child -->
<template>
  <h1 id="My-Blog-Post">My Blog Post</h1> <!-- Root 1 -->
  <articlecomponent>{{ content }}</articlecomponent> <!-- Root 2 -->
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value.$el); // #text  
})
</script>

<template>
  <child ref="childRef"></child>
</template>

等等，什麼，發生了什麼？

當我們使用 Fragment（多個節點）時，Vue 會建立一個文字節點來包裹我們的子元件根節點。

在 Vue 3 中使用 Fragments 時，Vue 會在元件的開頭插入一個空文字節點作為標記，這就是 $el 傳回 #text 節點的原因。

#text 就像 Vue 內部使用的參考點。

另外我應該要提到，您仍然可以存取元件實例（如果您不在子層級中使用

解決方案

1）像這樣使用單根
2）使用範本引用defineExpose

使用模板引用defineExpose

<!-- Child -->
<script setup lang="ts">
import { ref } from 'vue';

const h1Ref = ref()
const articleRef = ref()


defineExpose({
  h1Ref,
  articleRef
})
</script>

<template>
  <h1 id="My-Blog-Post">My Blog Post</h1> 
  <articlecomponent ref="articleRef">{{ content }}</articlecomponent> 
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value); 
  //  {h1Ref: RefImpl, articleRef: RefImpl}
})
</script>

<template>
  <child ref="childRef"></child>
</template>

現在您可以存取您的引用以及使用defineExpose公開的所有內容。