构建生产堆栈：Docker、Meilisearch、NGINX 和 NestJS

介绍

如果您习惯了 Vue 2，您可能还记得每个组件的模板都需要一个根元素。在 Vue 3 中，由于片段的存在，这不再是必要的。这意味着您的组件现在可以拥有多个根元素，而无需包装器。

<!-- Vue 2 -->
<template>
  <div> <!-- wrapper ? -->
    <h1>My Blog Post</h1>
    <ArticleComponent>{{ content }}</ArticleComponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1>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>

• And when you have more than one root:

<!-- Child -->
<template>
  <h1>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" />
</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 ref="h1Ref">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" />
</template>

现在您可以访问您的引用以及使用defineExpose公开的所有内容。

以上是构建生产堆栈：Docker、Meilisearch、NGINX 和 NestJS的详细内容。更多信息请关注PHP中文网其他相关文章！