Vue.jsのスコープスロットの詳しい説明-Vue.js-php.cn

Vue.jsのスコープスロットの詳しい説明

青灯夜游

リリース： 2020-09-30 17:40:28

転載

2801 人が閲覧しました

Vue.jsのスコープスロットの詳しい説明

スコープスロットは、コンポーネントの汎用性と再利用性を高めることができる Vue.js の便利な機能です。唯一の問題は、理解するのが難しいことです! 親と子の範囲について頭を悩ませることは、難しい数学方程式を解くようなものです。

何かを簡単に理解できない場合、それを使って問題を解決してみるのが良い方法です。この記事では、スコープ付きスロットを使用して再利用可能なリストコンポーネントを構築する方法を説明します。

Vue.jsのスコープスロットの詳しい説明

基本コンポーネント

これから構築するコンポーネントは my-list と呼ばれ、次のようになります。たくさんのこと。この機能の特別な点は、コンポーネントが使用されるたびにリスト項目のレンダリング方法をカスタマイズできることです。

最初に最も単純な使用例を扱い、my-list を取得してリスト (ジオメトリ形状名とその辺の数の配列) をレンダリングしましょう。

app.js

Vue.component(&#39;my-list&#39;, {
  template: &#39;#my-list&#39;,
  data() {
    return {
      title: &#39;Shapes&#39;,
      shapes: [ 
        { name: &#39;Square&#39;, sides: 4 }, 
        { name: &#39;Hexagon&#39;, sides: 6 }, 
        { name: &#39;Triangle&#39;, sides: 3 }
      ]
    };
  }
});

new Vue({
  el: &#39;#app&#39;
});

ログイン後にコピー

index.html

<div id="app">
  <my-list></my-list></div><script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div class="list-item" v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>

ログイン後にコピー

少し CSS を追加すると、次の図のようになります:

Vue.jsのスコープスロットの詳しい説明

my-list の一般化

次に、my-list をあらゆる種類のリストをレンダリングできるほど多用途にしたいと考えています。 2 番目のテストケースは、色を示す小さなサンプルを含む色のリストになります。

これを行うには、形状リストに固有のデータを抽象化する必要があります。リスト内の項目は異なる構造になっている可能性があるため、親リストで特定のリストの表示方法を定義できるように、my-list にスロットを提供します。

app.js

Vue.component(&#39;my-list&#39;, {
  template: &#39;#my-list&#39;,
  props: [ &#39;title&#39; ]
});

ログイン後にコピー

index.html

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <slot></slot>
    </div>
  </div>
</script>

ログイン後にコピー

次に、ルートインスタンスに my-list コンポーネントの 2 つのインスタンスを作成して、2 つのテストケースのリストを表示します。

app.js

new Vue({
  el: &#39;#app&#39;,
  data: {
    shapes: [ 
      { name: &#39;Square&#39;, sides: 4 }, 
      { name: &#39;Hexagon&#39;, sides: 6 }, 
      { name: &#39;Triangle&#39;, sides: 3 }
    ],
    colors: [
      { name: &#39;Yellow&#39;, hex: &#39;#F4D03F&#39;, },
      { name: &#39;Green&#39;, hex: &#39;#229954&#39; },
      { name: &#39;Purple&#39;, hex: &#39;#9B59B6&#39; }
    ]
  }
});

ログイン後にコピー

<div id="app">
  <my-list :title="Shapes">
    <div class="list-item" v-for="item in shapes">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </div>
  </my-list>
  <my-list :title="Colors">
    <div class="list-item" v-for="color in colors">
      <div>
        <div class="swatch" :style="{ background: color.hex }"></div>
        {{ color.name }}      </div>
    </div>
  </my-list></div>

ログイン後にコピー

次のように:

Vue.jsのスコープスロットの詳しい説明

##Surface コンポーネント

作成したコードは正常に動作しますが、コードはあまり良くありません。 my-list は、名前ごとにリストを表示するコンポーネントです。ただし、リストを親リストにレンダリングするロジックはすべて抽象化しました。このコンポーネントは、リストをプレゼンテーションマークアップでラップするだけです。

コンポーネントの 2 つの宣言にまだ重複したコードがあることを考慮します (例:

スコープ指定スロット

##これを実現するには、通常のスロットの代わりにスコープ付きスロットを使用します。スコープ付きスロットを使用すると、レンダリングされた要素を渡す代わりに、テンプレートをスロットに渡すことができます。テンプレートは親スコープでレンダリングされるため、「スコープ付き」スロットと呼ばれます。

たとえば、ロール A コンポーネントドメインの子コンポーネントを使用すると、特定の子データにアクセスできます。スロットは次のようになります。

<div>
  <slot my-prop="Hello from child"></slot>
</div>

ログイン後にコピー

このコンポーネントを使用する親コンポーネントは、スロット内でテンプレート要素を宣言します。このテンプレート要素には、エイリアスオブジェクトを指定する属性スコープがあります。任意のプロパティ(子テンプレート内の) スロットに追加された要素は、エイリアスオブジェクトのプロパティとして利用できます。

#my-list でスコープスロットを使用する

Prop が my-list に渡されるときにリスト配列を使用しましょう。次に、スロットをスコープ付きスロットに置き換えることができます。この方法では、my-list がリスト項目の反復処理を担当できますが、親は依然として各リスト項目の表示方法を定義できます。

index.html

<child>
  <template scope="props">
    <span>Hello from parent</span>
    <span>{{ props.my-prop }}</span>
  </template>
</child>

ログイン後にコピー

これで、my-list を取得して項目を反復処理します。、 item は現在のリスト項目のエイリアスです。スロットを作成し、 v-bind="item" を使用してリスト項目をスロットにバインドできます。
app.js

<div>
  <span>Hello from parent</span>
  <span>Hello from child</span>
</div>

ログイン後にコピー

index.html

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <!--template will go here-->
  </my-list>
  <my-list title="Colors" :items="colors">
    <!--template will go here-->
  </my-list>   
</div>

ログイン後にコピー

注: これまでパラメータなしで v-bind が使用されているのを見たことがない場合は、オブジェクト全体のプロパティがバインドされます。要素。バインド先のオブジェクトには通常、名前で指定する必要のない任意のプロパティがあるため、これはスコープ付きスロットに便利です。

现在我们将返回到根实例，并在my-list的slot中声明一个模板。首先查看形状列表，模板必须包含我们为其分配别名形状的scope属性。这个别名允许我们访问限定范围的道具。在模板内部，我们可以使用与以前完全相同的标记来显示形状列表项。

<my-list title="Shapes" :items="shapes">
  <template scope="shape">
    <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
  </template>
</my-list>

ログイン後にコピー

下面是完整的模板:

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <template scope="shape">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </template>
  </my-list>
  <my-list title="Colors" :items="colors">
    <template scope="color">
      <div>
        <div class="swatch" :style="{ background: color.hex }"></div>
        {{ color.name }}
      </div>
    </template>
  </my-list>   
</div>

ログイン後にコピー

结论

尽管这种方法和以前一样有很多标记，但它将公共功能委托给了组件，从而实现了更健壮的设计。

以下是完整代码的代码页: