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

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

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

nbsp;html>
  <htmllang>
  
    <metacharset>
    <title>Vue作用域插槽</title>
    <scriptsrc>
  
  
    <pid>
      <items>
        <!-- props对象接收来自子组件slot的$index参数 -->
        <templateslot>
          <span>{{users[props.$index].id}}</span>
          <span>{{users[props.$index].name}}</span>
          <span>{{users[props.$index].age}}</span>
          <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
          <href>编辑
          <href>删除
        
      
    
    <script>
      Vue.component(&#39;my-stripe-list&#39;, {
        /*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">
            
          
        `,
        props: {
          items: Array,
          oddBgcolor: String,
          evenBgcolor: String
        }
      });
      new Vue({
        el: &#39;#app2&#39;,
        data: {
          users: [
            {id: 1, name: &#39;张三&#39;, age: 20},
            {id: 2, name: &#39;李四&#39;, age: 22},
            {id: 3, name: &#39;王五&#39;, age: 27},
            {id: 4, name: &#39;张龙&#39;, age: 27},
            {id: 5, name: &#39;赵虎&#39;, age: 27}
          ]
        }
      });
    </script>
  
</href></href></templateslot></items></pid></scriptsrc></metacharset></htmllang>

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