vue スロットスロットの実装の理解

*プロジェクトでは、コンポーネントタグ内の一部のコンテンツを表示するには、デフォルトが有効にならず、 <template slot-scope= 'scope'></template> を追加する必要があるという状況が時々発生します。 takeeffect、ずっとごちゃごちゃ使っているのはあまり良くないので、最近色々な本を読んで実践して、ようやく内部の処理が理解できたのでここに記録します。

※言葉の話は省き、本題に入ります

1. スロットはサブコンポーネント内に記述され、コンポーネントラベル (親コンポーネントに導入されたサブコンポーネント) 内に入ると、その表示内容の順序はコンポーネントラベル (親コンポーネントに導入されたサブコンポーネント) によって決まります。

2. スロットスロットで表示される内容は親コンポーネントによって制御され、スロット表示は表示されず、表示順序は子コンポーネントによって制御されます。

*上記は全体的な概要であり、以下はコードの説明です。より明確になる可能性があります。

1.匿名スロット

親コンポーネント: 親コンポーネントはインポートされた子サブコンポーネントに大量のコンテンツを配置し、コンテンツの表示はサブコンポーネント内の順序に従って順次実行されます。

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <p>第三个显示的</p>
      <p>第四个显示的</p>
      <chilchildren></chilchildren>
      <p>第五个显示的</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}
</script>

サブコンポーネント: このコンポーネントは 2 つの匿名スロットを配置します。これは、親コンポーネントに導入されたサブコンポーネント内のコンテンツが 2 回表示されることを意味します。

<template>
  <div class="slotOne">
    <p>第二个显示的</p>
    <slot></slot>
    <p>第六个显示的</p>
    <!-- 注意这里又放了一个匿名插槽，意味着将在父组件里面引入的子组件内部的内容显示两次 -->
    <slot></slot>
    <p>第七个显示的</p>
  </div>
</template>

効果図: 赤いボックスで囲まれた 2 つの部分は、サブコンポーネントによって定義された 2 つのスロットです。

2. 名前付きスロット

親コンポーネント: 子コンポーネントのスロットに対応するには、v-slot または # (v-slot の短縮形) またはスロット (v3.0 ではこの表現は非推奨になりました) を使用します。

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <!-- <template v-slot:one> v-slot和#只能在template中写入-->
      <template #one>
        <p>第三个显示，因为对应子标签name为one的slot</p>
      </template>
      <p>
        特别注意：因为在子标签没有对应的匿名slot,故这下此内容和下面的子子标签就不会显示了
      </p>
      <chilchildren></chilchildren>
      <p slot="two">第五个显示,因为对应子标签name为two的slot</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}
</script>

サブコンポーネント: name 属性を使用して各スロットを区別します。これは、親コンポーネントで呼び出すのに便利です。

<template>
  <div>
    <p>第二个显示的</p>
    <slot name="one"></slot>
    <p>第四个显示的</p>
    <slot name="two"></slot>
  </div>
</template>

レンダリング:

親コンポーネント:

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <template slot="one">
        <p>第三个显示，因为对应子标签name为one的slot</p>
      </template>
      <p>
        第五个显示的,特别注意：因为在子标签有了相对应的匿名slot,故这下此内容和下面的子子标签就显示了
      </p>
      <chilchildren></chilchildren>
      <p slot="two">第七个显示</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}

サブアセンブリ:

<template>
  <div>
    <p>第二个显示的</p>
    <slot name="one"></slot>
    <p>第四个显示的</p>
    <slot></slot>
    <slot name="two"></slot>
  </div>
</template>

レンダリング:

3. スコープスロット

この時点で、slot-scope="scope" にマッピングされます。

親コンポーネントは、子コンポーネントの値をスロットスコープで受け取ります。このとき、スコープの名前は任意で、デフォルトではオブジェクトになっており、子コンポーネントのデータをすべて取得します。

親コンポーネント:

<template>
  <div class="hello">
    <Children>
    <!--  anyName默认可以随便起名字，它默认是一个对象，获取到的是Children组件中的data总数据，用它anyName.importData取出user数据 -->
      <template slot-scope="anyName">
        <p v-for="(item, index) in anyName.importData" :key="index">
          {
   
   { item }}
        </p>
      </template>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'

export default {
  components: {
    Children,
  },
}
</script>

サブアセンブリ:

<template>
  <div>
    <!-- importData待会父组件就可以用它来获得到user数据 -->
    <slot :importData="user"></slot>
  </div>
</template>

<script>
export default {
  components: {},
  name: '',
  data() {
    return {
      user: [
        { name: '小小', age: 18 },
        { name: '大大', age: 18 },
        { name: '呼呼', age: 18 },
      ],
    }
  }
</script>

レンダリング:

まあ、簡単に言えば終わりです！！

vue スロットスロットの実装の理解

おすすめ