この記事では、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 スロット構文

 
Hello World!
 

デモ

vue starter# を開くことができます。 。構文セクションの簡単な例を示すために、親コンポーネントはapp.vueファイルになります。app.vueファイルを開き、次のコード ブロックをコピーします:

<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>

にコピーします。ファイル コード ブロック:

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

npm run serve

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

ファイルにコピーします。

<template> <div> <slot></slot> <slot></slot> <slot></slot> </div> </template> <script> export default { name: &#39;Test&#39; } </script>

が出力されることがわかります。回。したがって、さらにコンテンツ (たとえば、タイトル、テキストを含む段落、および順序なしリスト) を追加したい場合、Vue では表示する特定のスコープを識別できるようにスコープに名前を付けることができます。test.vueファイル内のスロットに次のように名前を付けます。

<template> <div> <slot name="header"></slot> <slot name="paragraph"></slot> <slot name="links"></slot> </div> </template> <script> export default { name: &#39;Test&#39; } </script>

ファイルのテンプレート セクションにコピーします:

<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>

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

という名前のサブコンポーネント内のスロット名を参照するためのより優れた構文が付属しました。これは、初期のスロット構文を置き換えることを意味します。したがって、親コンポーネント テンプレートを次のようなスロットに置き換える代わりに:

<Test> <h1 slot="header">Hello world!</h1> </Test>

 
Hello world!
 

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

作用域插槽

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

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

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

结论

本文向您介绍了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 サイトの他の関連記事を参照してください。