vue で他のコンポーネントを参照する方法

Vue では、他のコンポーネントを参照する方法には、 タグ、スロット、スコープ付きスロット、イベント、および ref を使用する方法があります。

#Vue で他のコンポーネントを参照する方法

Vue では、コンポーネントの宣言方法に応じて、他のコンポーネントを参照する方法が多数あります。そして使用シナリオ。

1. タグを使用します。

これは、コンポーネントを参照する最も直接的な方法であり、子コンポーネントを直接使用できます。親コンポーネント内。構文は次のとおりです。

<code class="html"><component :is="componentName"></component></code>

ここで、

componentName は、サブコンポーネントまたはコンポーネント オブジェクトの名前です。

2. スロットの使用

スロットを使用すると、子コンポーネントのコンテンツを親コンポーネントのレイアウト内の特定の場所に挿入できます。親コンポーネントでスロット構文を使用します:

<code class="html"><my-component>
  <p>这是插槽内容</p>
</my-component></code>

子コンポーネントで

slot ディレクティブを使用して、スロット コンテンツの場所を指定します:

<code class="html"><template>
  <div>
    <slot></slot>
  </div>
</template></code>

3スコープ付きスロットの使用

スコープ付きスロットを使用すると、親コンポーネント内に子コンポーネントのローカル スコープを作成できます。親コンポーネントでスコープ付きスロット構文を使用します:

<code class="html"><my-component>
  <template #scoped-slot="{ prop }">
    <p>{{ prop }}</p>
  </template>
</my-component></code>

子コンポーネントで

scoped ディレクティブを使用して、スロットをスコープ付きスロットに変換します:

<code class="html"><template scoped>
  <div>
    <slot></slot>
  </div>
</template></code>

4 . イベントの使用

イベントはコンポーネント間の通信に使用できます。子コンポーネントで

$emit メソッドを使用してイベントをトリガーします。

<code class="javascript">this.$emit('my-event', data);</code>

親コンポーネントで

v-on ディレクティブとイベント名を使用して、イベント:

<code class="html"><my-component @my-event="handleEvent(data)"></my-component></code>

5. refs の使用

refs を使用してコンポーネント インスタンスを取得できます。子コンポーネントの

ref 属性を使用して参照を指定します:

<code class="html"><template ref="myRef">
  ...
</template></code>

親コンポーネントの

$refs 属性を使用してコンポーネント インスタンスを取得します: リーリー

以上がvue で他のコンポーネントを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。