ホームページ  >  記事  >  ウェブフロントエンド  >  Vue スコープ スロットの使用方法の詳細な説明

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

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-19 09:38:482577ブラウズ

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

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

<!DOCTYPE html>
  <htmllang="en">
  <head>
    <metacharset="UTF-8">
    <title>Vue作用域插槽</title>
    <scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <pid="app2">
      <my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
        <!-- props对象接收来自子组件slot的$index参数 -->
        <templateslot="cont"scope="props">
          <span>{{users[props.$index].id}}</span>
          <span>{{users[props.$index].name}}</span>
          <span>{{users[props.$index].age}}</span>
          <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
          <a:href="&#39;#edit/id/&#39;+users[props.$index].id"rel="external nofollow">编辑</a>
          <a:href="&#39;#del/id/&#39;+users[props.$index].id"rel="external nofollow">删除</a>
        </template>
      </my-stripe-list>
    </p>
    <script>
      Vue.component('my-stripe-list', {
        /*slot的$index可以传递到父组件中*/
        template: `
          <p>
            <pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? &#39;background:&#39;+oddBgcolor : &#39;background:&#39;+evenBgcolor">
              <slotname="cont":$index="index"></slot>
            </p>
          </p>
        `,
        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}
          ]
        }
      });
    </script>
  </body>
</html>

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

推奨読書:

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

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

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

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

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