ホームページ > 記事 > ウェブフロントエンド > Vue.js でスロットを使用して親コンポーネントから子コンポーネントにデータを渡す

Vue.js でスロットを使用して親コンポーネントから子コンポーネントにデータを渡す

青灯夜游転載: 2020-09-19 11:08:552972ブラウズ

この記事では、Vue.js で Vue スロットを使用して親コンポーネントから子コンポーネントにデータを渡す方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#この記事は、あらゆる段階の開発者 (初心者を含む) に適しています。

始める前に

コンピュータには次のものが必要です:

すでにインストールされていますNode.js バージョン 10.x 以降。バージョンを確認するには、ターミナル/コマンドプロンプトで次のコマンドを実行します: node -v
コードエディター。Visual Studio Code
# を推奨します
##お使いのコンピューターにグローバルにインストールされている Vue の最新バージョン
Vue CLI 3.0 がコンピューターにインストールされています。これを行うには、まず古い CLI バージョンをアンインストールします:

npm uninstall -g vue-cli

次に、新しいバージョンをインストールします:

npm install -g @ vue / cli

ここからダウンロード
Vueプロジェクトの開始方法
ダウンロードしたプロジェクトを解凍します。
解凍したファイルに移動し、コマンドを実行してすべての依存関係を最新の状態に保ちます。 :

npm install

Vue スロットとは何ですか?

Vue スロットは、テンプレートコンテンツ配布用のプラットフォームを提供するために Vue チームによって作成された Vue テンプレート要素です。これは、Web コンポーネント仕様の草案からインスピレーションを得た Content Distribution API の実装です。 Vue スロットを使用すると、プロジェクト内のさまざまなコンポーネント間で HTML コードを渡したり配布したりできます。

なぜ Vue スロットが重要なのでしょうか?

コンテンツの配布はさまざまな理由で重要ですが、その一部は構造に関係しています。 Vue スロットを使用すると、(TypeScript と同様に) HTML インターフェイスを構築でき、テンプレートインジェクションを通じてコンポーネントを構築するためのガイドとして使用できます。これは、あるコンポーネントから別のコンポーネントにテンプレートコードを渡すための、非常にスケーラブルで効率的なソリューションです。

コンテンツの配置は、Vue スロットのもう 1 つの優れた使用例です。テンプレートを作成し、別のコンポーネントまたは親コンポーネントを使用して、ユーザーインターフェイスに表示されるようにテンプレートを配置するだけです。

スロットとプロップ

#Vue スロットについて知っている場合は、プロップとスロットが同じことを行うかどうか疑問に思うかもしれません。これらのツールやプラットフォームの中心的な考え方は、リソースの再利用性と効率性を促進することです。これを念頭に置くと、スロットとプロップは似ています。

Props はコンポーネント間でのデータオブジェクトの受け渡しを処理し、slot はコンポーネント間でのテンプレート (HTML) コンテンツの受け渡しを処理します。ただし、スコープ付きスロットはプロップとまったく同じように動作します。これについては、このチュートリアルで明確に説明します。

Vue スロット構文

スロットの場合、サブコンポーネントは、コンテンツをどのように配置するかについてのインターフェイスまたは構造として機能します。次のようになります:

<template>
  <div>
    <slot></slot>
  </div>
</template>

親コンポーネント (子コンポーネントに挿入される HTML コンテンツが存在する場所) は次のようになります:

<Test>
   <h2>Hello World!</h2>
 </Test>

この組み合わせは、次のユーザーインターフェイスを返します。次のようになります:

<template>
  <div>
    <h2>Hello World!</h2>
  </div>
</template>

スロット自体が、コンテンツをどこにどのように挿入するかについてのガイドとしてどのように機能するかに注目してください。これが中心的な考え方です。

デモ

この記事を最初から実行した場合は、vs code ##project で

vue starter# を開くことができます。。構文セクションの簡単な例を示すために、親コンポーネントは app.vue ファイルになります。 app.vue ファイルを開き、次のコードブロックをコピーします: <pre class="brush:js;toolbar:false"><template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <Test> <h2>Hello World!</h2> </Test> </div> </template> <script> import Test from &#39;./components/Test.vue&#39; export default { name: &#39;app&#39;, components: { Test } } </script></pre> 子コンポーネントはテストコンポーネントになるため、以下を

test.vue

にコピーします。ファイルコードブロック: <pre class="brush:js;toolbar:false"><template> <div> <slot></slot> </div> </template> <script> export default { name: 'Test' } </script></pre> 次のコマンドを使用して、開発環境でアプリケーションを実行します:

npm run serve

名前付きスロットVue コンポーネントは複数のスロットを持つことができます。つまり、任意の数のスロットを持つことができます。この機能をテストするには、この新しいコードブロックを

test.vue

ファイルにコピーします。 <pre class="brush:js;toolbar:false"><template> <div> <slot></slot> <slot></slot> <slot></slot> </div> </template> <script> export default { name: &#39;Test&#39; } </script></pre> アプリケーションを実行すると、

hello world

が出力されることがわかります。回。したがって、さらにコンテンツ (たとえば、タイトル、テキストを含む段落、および順序なしリスト) を追加したい場合、Vue では表示する特定のスコープを識別できるようにスコープに名前を付けることができます。 test.vue ファイル内のスロットに次のように名前を付けます。 <pre class="brush:js;toolbar:false;"><template> <div> <slot name="header"></slot> <slot name="paragraph"></slot> <slot name="links"></slot> </div> </template> <script> export default { name: &#39;Test&#39; } </script></pre> ここで、これらの HTML 要素を表示するスロット名に従ってマークする必要もあります。これを

app.vue

ファイルのテンプレートセクションにコピーします: <pre class="brush:js;toolbar:false"><template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <Test> <h2 slot="header">Hello world!</h2> <p slot="paragraph">Hello, I am a paragraph text</p> <ul slot="links"> <li>Hello, I am a list item</li> <li>Hello, I am a list item</li> </ul> </Test> </div> </template></pre>

v-castle syntaxWhen VUE バージョン 2.6 がリリースされたとき、

v-slot

という名前のサブコンポーネント内のスロット名を参照するためのより優れた構文が付属しました。これは、初期のスロット構文を置き換えることを意味します。したがって、親コンポーネントテンプレートを次のようなスロットに置き換える代わりに: <pre class="brush:js;toolbar:false"><Test> <h1 slot="header">Hello world!</h1> </Test></pre> バージョン 3.0 以降では、次のようになります:

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

注意，除了字符串从slot到v-slot的细微变化外，还有一个重大变化：v-slot只能在模板上定义，而不能在任何html元素上定义。这是一个很大的变化，因为它质疑命名插槽的可用性，但截至本文撰写之时，插槽仍然是文档的很大一部分。

作用域插槽

设想一个场景，其中Vue插槽还可以从父组件访问子组件中的数据对象，这是一种具有道具功能的插槽。要说明这一点，请继续，通过将下面的代码块复制到test.vue文件中，在子组件中创建一个数据对象：

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与普通props一样，v-bind指令用于将数据中的团队与父组件中的prop引用绑定。打开app.vue文件并将下面的代码块复制到模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

如果运行应用程序，您将看到数据对象已成功传递到父组件。

结论

本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。

英文原文地址：https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上がVue.js でスロットを使用して親コンポーネントから子コンポーネントにデータを渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はlogrocket.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Vue.js の初心者向け面接の質問 25 選次の記事：Vue.js の初心者向け面接の質問 25 選

続きを見る