Vue.js でスロットを使用して親コンポーネントから子コンポーネントにデータを渡す
この記事では、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
- ここからダウンロード
- ダウンロードしたプロジェクトを解凍します。
- 解凍したファイルに移動し、コマンドを実行してすべての依存関係を最新の状態に保ちます。 :
npm install
Vue スロットとは何ですか?
Vue スロットは、テンプレート コンテンツ配布用のプラットフォームを提供するために Vue チームによって作成された Vue テンプレート要素です。これは、Web コンポーネント仕様の草案からインスピレーションを得た Content Distribution API の実装です。 Vue スロットを使用すると、プロジェクト内のさまざまなコンポーネント間で HTML コードを渡したり配布したりできます。なぜ Vue スロットが重要なのでしょうか?
スロットとプロップ
#Vue スロットについて知っている場合は、プロップとスロットが同じことを行うかどうか疑問に思うかもしれません。これらのツールやプラットフォームの中心的な考え方は、リソースの再利用性と効率性を促進することです。これを念頭に置くと、スロットとプロップは似ています。 Props はコンポーネント間でのデータ オブジェクトの受け渡しを処理し、slot はコンポーネント間でのテンプレート (HTML) コンテンツの受け渡しを処理します。ただし、スコープ付きスロットはプロップとまったく同じように動作します。これについては、このチュートリアルで明確に説明します。Vue スロット構文
スロットの場合、サブコンポーネントは、コンテンツをどのように配置するかについてのインターフェイスまたは構造として機能します。次のようになります:<template>
<div>
<slot></slot>
</div>
</template><Test> <h2>Hello World!</h2> </Test>
<template>
<div>
<h2>Hello World!</h2>
</div>
</template>デモ
この記事を最初から実行した場合は、vs code ##project でvue starter# を開くことができます。 。構文セクションの簡単な例を示すために、親コンポーネントは app.vue ファイルになります。 app.vue ファイルを開き、次のコード ブロックをコピーします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">ログイン後にコピー</div></div> 子コンポーネントはテスト コンポーネントになるため、以下を
にコピーします。ファイル コード ブロック: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Test'
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div> 次のコマンドを使用して、開発環境でアプリケーションを実行します:
npm run serve
名前付きスロットVue コンポーネントは複数のスロットを持つことができます。つまり、任意の数のスロットを持つことができます。この機能をテストするには、この新しいコード ブロックを
test.vue ファイルにコピーします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template>
<div>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
<script>
export default {
name: &#39;Test&#39;
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div> アプリケーションを実行すると、
が出力されることがわかります。回。したがって、さらにコンテンツ (たとえば、タイトル、テキストを含む段落、および順序なしリスト) を追加したい場合、Vue では表示する特定のスコープを識別できるようにスコープに名前を付けることができます。 test.vue ファイル内のスロットに次のように名前を付けます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">ログイン後にコピー</div></div> ここで、これらの HTML 要素を表示するスロット名に従ってマークする必要もあります。これを
ファイルのテンプレート セクションにコピーします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">ログイン後にコピー</div></div>
v-castle syntaxWhen VUE バージョン 2.6 がリリースされたとき、
v-slot という名前のサブコンポーネント内のスロット名を参照するためのより優れた構文が付属しました。これは、初期のスロット構文を置き換えることを意味します。したがって、親コンポーネント テンプレートを次のようなスロットに置き換える代わりに: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><Test>
<h1 slot="header">Hello world!</h1>
</Test></pre><div class="contentsignin">ログイン後にコピー</div></div> バージョン 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: 'Test',
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/
相关推荐：
更多编程相关知识，请访问：编程入门！！
以上がVue.js でスロットを使用して親コンポーネントから子コンポーネントにデータを渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7554
15
1382
52
83
11
24
96
vite が .env ファイルを解析する方法についての詳細な説明
Jan 24, 2023 am 05:30 AM
Vue フレームワークを使用してフロントエンド プロジェクトを開発する場合、デプロイ時に複数の環境をデプロイすることになりますが、開発環境、テスト環境、オンライン環境で呼び出されるインターフェイス ドメイン名が異なることがよくあります。どうすれば区別できるでしょうか？それは環境変数とパターンを使用することです。
Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明
Apr 24, 2023 am 10:52 AM
Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。
vue3 の reactive() について詳しく話しましょう
Jan 06, 2023 pm 09:21 PM
前書き: vue3 の開発では、reactive は応答性の高いデータを実装するメソッドを提供します。これは日常の開発で頻繁に使用される API です。この記事では、著者はその内部動作メカニズムを探ります。
Vue3 で単体テストを作成する方法を調べる
Apr 25, 2023 pm 07:41 PM
Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。
JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析)
Mar 23, 2023 pm 07:53 PM
Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザー インターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。
vue がファイル スライス アップロードを実装する方法の簡単な分析
Mar 24, 2023 pm 07:40 PM
実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイル ストリームはいくつかの小さなファイル ストリームに分割され、インターフェイスはそれぞれの小さなファイル ストリームを配信するように要求されます。
Vue2実装APIの原理を解析する
Jan 13, 2023 am 08:30 AM
Vue3 のリリース以来、単語合成 API は Vue を書く学生の視野に入ってきました。合成 API が以前のオプション API よりもどれほど優れているかは誰もが聞いたことがあると思います。そして、@ のリリースにより、 vue/composition-api プラグイン、Vue2 学生もバスに乗れます. 次に、主に Response ref と Reactive を使用して、このプラグインがどのようにこれを実現しているかを詳細に分析します。
vue3 で Amap API を使用する方法について話しましょう
Mar 09, 2023 pm 07:22 PM
Amap を使用したとき、公式から多くのケースやデモを勧められましたが、これらのケースはすべてネイティブ メソッドを使用してアクセスしており、vue や React のデモは提供されていませんでした。vue2 アクセスについてはオンラインで多くの人が書いていますが、この記事では、 vue3 が一般的に使用される Amap API をどのように使用するかを見ていきます。皆さんのお役に立てれば幸いです。
