Vue スコープスロットの使用方法の詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue スコープスロットの使用方法の詳細な説明

Apr 19, 2018 am 09:38 AM

範囲スロット詳しい説明

今回は、Vue スコープスロットの使用について詳しく説明します。Vue スコープスロットを使用する際の注意事項について、実際のケースを見てみましょう。

たとえば、私はストライプを実現できるリストグループウェアを作成しました。公開した後、ユーザーは各行のコンテンツやスタイルをカスタマイズできます(通常のスロットでこの作業を完了できます)。スロットのスコープの重要な点は、親コンポーネントが子コンポーネントのスロットから渡されたパラメーターを受け取ることができることです。詳細については、ケースと notes を参照してください。

&lt;!DOCTYPE html&gt;
  &lt;htmllang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;metacharset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Vue作用域插槽&lt;/title&gt;
    &lt;scriptsrc=&quot;https://cdn.bootcss.com/vue/2.3.4/vue.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;pid=&quot;app2&quot;&gt;
      &lt;my-stripe-list:items=&quot;users&quot;odd-bgcolor=&quot;#D3DCE6&quot;even-bgcolor=&quot;#E5E9F2&quot;&gt;
        &lt;!-- props对象接收来自子组件slot的$index参数 --&gt;
        &lt;templateslot=&quot;cont&quot;scope=&quot;props&quot;&gt;
          &lt;span&gt;{{users[props.$index].id}}&lt;/span&gt;
          &lt;span&gt;{{users[props.$index].name}}&lt;/span&gt;
          &lt;span&gt;{{users[props.$index].age}}&lt;/span&gt;
          &lt;!-- 这里可以自定[编辑][删除]按钮的链接和样式 --&gt;
          &lt;a:href=&quot;&#39;#edit/id/&#39;+users[props.$index].id&quot;rel=&quot;external nofollow&quot;&gt;编辑&lt;/a&gt;
          &lt;a:href=&quot;&#39;#del/id/&#39;+users[props.$index].id&quot;rel=&quot;external nofollow&quot;&gt;删除&lt;/a&gt;
        &lt;/template&gt;
      &lt;/my-stripe-list&gt;
    &lt;/p&gt;
    &lt;script&gt;
      Vue.component('my-stripe-list', {
        /*slot的$index可以传递到父组件中*/
        template: `
          &lt;p&gt;
            &lt;pv-for=&quot;(item, index) in items&quot;style=&quot;line-height:2.2;&quot;:style=&quot;index % 2 === 0 ? &#39;background:&#39;+oddBgcolor : &#39;background:&#39;+evenBgcolor&quot;&gt;
              &lt;slotname=&quot;cont&quot;:$index=&quot;index&quot;&gt;&lt;/slot&gt;
            &lt;/p&gt;
          &lt;/p&gt;
        `,
        props: {
          items: Array,
          oddBgcolor: String,
          evenBgcolor: String
        }
      });
      new Vue({
        el: '#app2',
        data: {
          users: [
            {id: 1, name: '张三', age: 20},
            {id: 2, name: '李四', age: 22},
            {id: 3, name: '王五', age: 27},
            {id: 4, name: '张龙', age: 27},
            {id: 5, name: '赵虎', age: 27}
          ]
        }
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS は星による評価を実装します

jS は一定の速度で画像のフェードインとフェードアウトを実装します

JS はデータ検証とチェックボックスフォームの送信を実装します

以上がVue スコープスロットの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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