本番スタックの構築: Docker、Meilisearch、NGINX、NestJS

導入

Vue 2 に慣れている方は、すべてのコンポーネントのテンプレートに 1 つのルート要素が必要だったことを覚えているかもしれません。 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 は何を参照するのでしょうか? ?

子コンポーネントが オプション 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 でフラグメントを使用する場合、Vue はコンポーネントの先頭に空のテキスト ノードをマーカーとして挿入します。そのため、$el は #text ノードを返します。

#text は、Vue が内部で使用する参照ポイントのようなものです。

また、コンポーネント インスタンスに引き続きアクセスできることにも言及しておきます (子で

解決

1) このように単一ルートを使用します
2) テンプレート参照を使用する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>

これで、refs と、defineExpose を使用して公開したすべてのものにアクセスできるようになりました。