HTMLレベルでは、コンポーネントインターフェースを次のように定義することにしました。レベル1~6を渡してh1~h6タグを生成し、スロットを使用してコンテンツを生成します。 <div id="div1"> <child :level="1">こんにちは世界!</child> </div> <script type="text/x-template" id="子テンプレート"> <h1 v-if="レベル === 1"> <スロット></スロット> </h1> <h2 v-if="レベル === 2"> <スロット></スロット> </h2> <h3 v-if="レベル === 3"> <スロット></スロット> </h3> <h4 v-if="レベル === 4"> <スロット></スロット> </h4> <h5 v-if="レベル === 5"> <スロット></スロット> </h5> <h6 v-if="レベル === 6"> <スロット></スロット> </h6> </スクリプト> <script type="text/javascript"> /** * 子コンポーネントをグローバルに登録します。テンプレート値が # で始まる場合はオプション シンボルとして使用され、一致する要素の innerHTML がテンプレートとして使用されることに注意してください。よくあるトリックは、<script type="x-template"> を使用してテンプレートを組み込むことです。これの利点は、HTML が内部のコンテンツをレンダリングしないことです。* * ここでテンプレートを使用するのは最善の選択ではありません: * 1. コードが長い* 2. 異なるタイトルにコンテンツを挿入するにはスロットを繰り返し使用する必要がある * 3. コンポーネントにはルート要素が必要なので、タイトルとコンテンツは <div><h1>hello world</h1></div> のような無駄な div で囲まれます。 */ Vue.component('child', { テンプレート: '#child-template', 小道具: { レベル: タイプ: 数値、 必須: true } }, データ: 関数() { 戻る { 1: 1 } } }) 新しいVue({ el:"#div1" }) </スクリプト> 上記の例を render 関数を使用して実装してみます。render関数を使用する場合、テンプレート オプションは無視されることに注意してください。
次に例を示します。 <div id="div1"> <子:レベル="1"> こんにちは世界! </子> <子:レベル="2"> <!-- 表示されません --> <span slot="footer">これはフッタースロットです</span> <p slot="header">これはヘッダースロットです</p> </子> </div> <スクリプト> Vue.component('child', { レンダリング: 関数 (createElement) { console.log(this.$slots); 要素の作成を返す( 'h' + this.level, // tagName タグ名 { // 各hタグのクラスを設定する 'クラス': { foo: 真、 バー: 偽 }, //最終的にインラインスタイルとしてレンダリングされます style: { 色: '赤'、 フォントサイズ: '14px' }, // その他の HTML 属性 attrs: { id: 'foo', 'データID': 'バー' }, // DOM属性domProps: { // innerHTML: 'domPropsから', }, // "on" に基づくイベント リスナー // そのため、v-on:keyup.enter on: { などの修飾子はサポートされなくなりました。 クリック: this.clickHandler }, // ... }, // this.$slots から VNodes リストの静的コンテンツを取得できます // $slots.default はコンポーネントの名前のないスロットにアクセスするために使用されます // 名前付きスロットが必要な場合、スロット名を指定する必要があります。this.$slots.header // [this.$slots.default,this.$slots.footer,this.$slots.header] //レベル2のスロットを表示 [this.$slots.default] //名前のないスロットのみを表示 ) }, template: '<div v-if="level===1"><slot></slot></div>', // 無視されます props: { レベル: タイプ: 数値、 必須: true } }, メソッド: { クリックハンドラ: 関数 () { コンソールログ('clickHandler') } } }) 新しいVue({ el: "#div1" }) </スクリプト> レンダリングは次のようになります。 Vue.js の render 関数の詳しい使い方については、これで終了です。Vue.js の render 関数に関するより詳しい内容については、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux で AIDE に基づいてファイルシステムの整合性を検出する方法
>>: MySQL OOM (メモリオーバーフロー) の解決策
目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...
以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...
ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...
1.MySQLのバージョン [root@clq システム]# mysql -v MySQL モニター...
この例で使用されているMySQLのバージョンはmysql-8.0.15-winx64です。 1. z...
起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...
構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....
ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...
目次1. DATETIMEとTIMESTAMPの使用1. 類似点2. 相違点3. 選択2. varc...
アプリをテストしたいが、それを携帯電話で実行したくない場合があります。この場合、仮想マシンを使用して...
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
制約制約によりデータの整合性と一貫性が確保される制約はテーブルレベルの制約と列レベルの制約に分けられ...