Vue でスロットを実装して、親コンポーネントから渡されたテンプレートを子コンポーネントに表示する方法 (詳細なチュートリアル)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue でスロットを実装して、親コンポーネントから渡されたテンプレートを子コンポーネントに表示する方法 (詳細なチュートリアル)

亚连

Jun 02, 2018 am 09:18 AM

slot 見せるコンポーネント

この記事では、親コンポーネントから渡されたテンプレートを子コンポーネントに表示するためのvueスロットを主に紹介します

親コンポーネントではslot属性を指定せず、デフォルトでdefaultを使用することができます

スロットのデフォルト値を使用します。親コンポーネントが対応するスロットを渡さない場合、デフォルト値が表示されます

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click=&#39;click&#39;>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot=&#39;title&#39;>hello</p>
      <p slot=&#39;content&#39;>
        world
      </p>
    </modal>
    <modal></modal>
  </p>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <p>
        modal
        <slot name=&#39;default&#39;>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name=&#39;title&#39;>
        </slot>
      </h1>
      content:
      <slot name=&#39;content&#39;></slot>
      </p>
    </template>
  <script type="text/javascript">
    let modal = {
      template: &#39;#modal&#39;
    }
    new Vue({
      el: &#39;#app&#39;,
      components: {
        // es 简写 ，只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log(&#39;aaa&#39;)
        }
      }
    })
  </script>
</body>
</html>

ログイン後にコピー

上記は、すべての人にとって役立つことを願っています。未来。

JS フォームで値の転送と URL エンコード変換を実装するには?

jQueryを使用して左右スライドの切り替えメソッドを実装するにはどうすればよいですか?

vueのモバイル側でスクロールメソッドを実装するにはどうすればよいですか?

以上がVue でスロットを実装して、親コンポーネントから渡されたテンプレートを子コンポーネントに表示する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7686

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

Windows 11 の検索からニュースやトレンドコンテンツを削除する方法 Oct 16, 2023 pm 08:13 PM

Windows 11 で検索フィールドをクリックすると、検索インターフェイスが自動的に開きます。左側に最近のプログラムのリストが表示され、右側に Web コンテンツが表示されます。 Microsoft はそこにニュースやトレンドのコンテンツを表示します。今日のチェックでは、Bing の新しい DALL-E3 画像生成機能、「Chat Dragons with Bing」オファー、ドラゴンに関する詳細情報、Web セクションのトップニュース、ゲームの推奨事項、およびトレンド検索セクションを宣伝しています。項目のリスト全体は、コンピューター上でのアクティビティとは無関係です。一部のユーザーはニュースを表示できることに感謝しているかもしれませんが、これらはすべて他の場所で豊富に利用できます。直接的または間接的にそれをプロモーションまたは広告として分類する人もいます。 Microsoft はインターフェイスを使用して自社のコンテンツを宣伝しています。

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Dec 28, 2023 pm 03:43 PM

win10で一部のゲームをプレイすると、画面がフリーズしたり画面がぼやけるなどの不具合が多くのユーザーに発生しますが、現時点ではダイレクトプレイ機能をオンにすることで問題を解決でき、機能の操作方法も非常に簡単です。 win10 の古いコンポーネントである Directplay をインストールする方法 1. 検索ボックスに「コントロールパネル」と入力して開きます 2. 表示方法として大きなアイコンを選択します 3. 「プログラムと機能」を見つけます 4. 左側をクリックして有効にするか、 Win 機能をオフにする 5. ここで古いバージョンを選択しますチェックボックスをオンにするだけです

Windows 11 ユーザーガイド: 広告ポップアップを無効にする方法 Sep 22, 2023 pm 07:21 PM

Microsoft の Windows 11 オペレーティングシステムでは、通知システムを使用してコンピュータ上に提案がポップアップとして定期的に表示される場合があります。この提案システムは、もともと Windows 11 のワークフローを改善するためのヒントや提案をユーザーに提供するために設計されましたが、現在ではほぼ完全に Microsoft のサービスと製品を宣伝する広告システムに変わりました。提案ポップアップでは、Microsoft 365 サブスクリプションをユーザーに宣伝したり、Android スマートフォンをデバイスにリンクしたり、バックアップソリューションをセットアップしたりすることを提案する場合があります。これらのポップアップが煩わしい場合は、システムを調整して完全に無効にすることができます。次のガイドでは、Microsoft の Windows 11 オペレーティングシステムを実行しているデバイスでポップアップを無効にするための推奨事項を示します。

デスクトップレイアウトがロックされる理由と解決策 Feb 19, 2024 pm 06:08 PM

デスクトップレイアウトがロックされるとどうなりますか? コンピューターを使用しているときに、デスクトップレイアウトがロックされる状況に遭遇することがあります。この問題は、デスクトップアイコンの位置を自由に調整したり、デスクトップの背景を変更したりすることができないことを意味します。では、デスクトップレイアウトがロックされていると表示される場合、具体的には何が起こっているのでしょうか? 1. デスクトップレイアウトとロック機能を理解するまず、デスクトップレイアウトとデスクトップロックの 2 つの概念を理解する必要があります。デスクトップレイアウトとは、ショートカット、フォルダー、ウィジェットなど、デスクトップ上のさまざまな要素の配置を指します。私たちは自由になれる

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネントスタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

古いバージョンのwin10コンポーネントの設定を開く方法 Dec 22, 2023 am 08:45 AM

Win10 の古いバージョンのコンポーネントは、デフォルトで閉じられていることが多いため、ユーザー自身が設定で有効にする必要があります。まず、設定を入力する必要があります。操作は非常に簡単です。以下の手順に従ってください。Win10 の古いバージョンはどこにありますか?バージョンコンポーネント? 開く 1. [スタート] をクリックし、[Win システム] をクリックします 2. クリックしてコントロールパネルに入ります 3. 次に、下のプログラムをクリックします 4. [Win 機能を有効または無効にする] をクリックします 5. ここで必要なものを選択できます開く

リモートデスクトップ接続で相手のタスクバーを表示させる方法 Jan 03, 2024 pm 12:49 PM

リモートデスクトップ接続を利用しているユーザーは多いですが、利用中に相手のタスクバーが表示されないなどのちょっとしたトラブルに遭遇する人も多いと思いますが、実は相手の設定の問題である可能性が高いです。以下の解決策。リモートデスクトップ接続時に相手のタスクバーを表示する方法： 1. まず「設定」をクリックします。 2. 次に「個人用設定」を開きます。 3. 次に、左側の「タスクバー」を選択します。 4. 画像の「タスクバーを非表示にする」オプションをオフにします。

Linux で現在のディレクトリを確認するにはどうすればよいですか? Feb 23, 2024 pm 05:54 PM

Linux システムでは、pwd コマンドを使用して現在のパスを表示できます。 pwd コマンドは PrintWorkingDirectory の略で、現在の作業ディレクトリのパスを表示するために使用されます。ターミナルに次のコマンドを入力して、現在のパスを表示します。 pwd このコマンドを実行すると、ターミナルには現在の作業ディレクトリのフルパス (/home/user/Documents など) が表示されます。さらに、他のオプションを使用して pwd コマンドの機能を拡張することもできます。たとえば、-P オプションを使用すると、次のように表示できます。

See all articles

Vue でスロットを実装して、親コンポーネントから渡されたテンプレートを子コンポーネントに表示する方法 (詳細なチュートリアル)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック