この記事では、Vue.js で Vue スロットを使用して親コンポーネントから子コンポーネントにデータを渡す方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#この記事は、あらゆる段階の開発者 (初心者を含む) に適しています。
始める前に
コンピュータには次のものが必要です:
すでにインストールされていますNode.js バージョン 10.x 以降。バージョンを確認するには、ターミナル/コマンド プロンプトで次のコマンドを実行します: node -v
コード エディター。Visual Studio Code
# を推奨します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: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><div class="contentsignin">ログイン後にコピー</div></div>
子コンポーネントはテスト コンポーネントになるため、以下を
にコピーします。ファイル コード ブロック: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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:js;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: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><div class="contentsignin">ログイン後にコピー</div></div>
ここで、これらの HTML 要素を表示するスロット名に従ってマークする必要もあります。これを
ファイルのテンプレート セクションにコピーします: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><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:js;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 サイトの他の関連記事を参照してください。