Qu'est-ce qu'une machine à sous ? Parlons de la façon d'utiliser les emplacements dans Vue3

Vue Je crois que tous ceux qui ont utilisé Vue l'ont plus ou moins utilisé, mais connaissez-vous toutes ses utilisations ? Cet article vous présentera toute l'utilisation des slots dans Vue3 pour vous aider à trouver et combler les lacunes. (Partage vidéo d'apprentissage : tutoriel vidéo vue)

Qu'est-ce qu'un slot

En termes simples, il s'agit d'un pit dans un composant enfant qui est fourni au composant parent Use. <slot></slot> signifie que le composant parent peut remplir n'importe quel code de modèle dans ce trou, puis le composant enfant <slot></slot> sera remplacé par ce contenu. Par exemple, l'exemple d'emplacement le plus simple坑位，用<slot></slot> 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容。比如一个最简单插槽例子

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

子组件中的<slot></slot> 便是父组件放在子组件标签<child></child>之间的内容。当然这之间你可以传入任何代码片段，都会被放到<slot></slot>这个位置。

同样的你也可以在标签<child></child>之间放入变量，比如

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：

同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个<child></child>之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如

//子组件
<template>
    <div>
        <slot>我是默认内容</slot>
    </div>
</template>

//父组件1
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//父组件2
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

此时父组件1展示默认内容

父组件2展示提供的内容

具名插槽

很多时候一个 插槽满足不了我们的需求，我们需要多个 插槽。于是就有了具名插槽，就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽 <slot name="xx"></slot>被称为具名插槽。没有提供 name 的 <slot></slot> 会隐式地命名为“default”。在父组件中可以使用v-slot:xxx（可简写为#xxx） 指令的 <template></template> 元素将目标插槽的名字传下去匹配对应 插槽。比如

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 中萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

作用域插槽

作用域插槽

上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？

其实插槽可以像对组件传递 props 那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

//子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

你还可以以结构的形式获取slot

<template>
  <div>
    <child>
      My name is {{ personName }} and I am {{ age }} years old this year
    </child>
  </div>
</template>

<slot></slot> dans un composant enfant est l'endroit où le composant parent est placé entre les balises du composant enfant <child></child> contenu. Bien entendu, vous pouvez transmettre n'importe quel fragment de code pendant cette période, et il sera placé à l'emplacement <slot></slot>.

🎜De même Vous pouvez également mettre des variables entre les balises <child></child>, telles que 🎜

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

🎜 Laissez-moi d'abord vous expliquer les deux mots qui apparaissent fréquemment slot et Slot content code> pour éviter toute confusion lors d'une lecture ultérieure : 🎜🎜<img src="https://img.php.cn/upload/image/501/828/212/166125564295003Quest-ce%20quune%20machine%20%C3%A0%20sous%20?%20Parlons%20de%20la%20fa%C3%A7on%20dutiliser%20les%20emplacements%20dans%20Vue3" title="1661255642950034 .png" alt=" Quest-ce quune machine à sous ? Parlons de la façon dutiliser les emplacements dans Vue3">🎜🎜Le même <code>slot représente cette variable msg. Par conséquent, le composant enfant Slot peut accéder à la portée des données du composant parent, mais le Contenu du slot ne peut pas accéder aux données du composant enfant (c'est-à-dire les deux <child></child> ne peut pas utiliser de données dans les sous-composants), c'est ce qu'on appelle la portée de rendu. La méthode de transmission des paramètres du slot au contenu du slot sera introduite plus tard🎜

🎜Le contenu par défaut🎜🎜🎜 n'est pas disponible dans le composant parent Lorsque nous fournissons un contenu de slot, nous pouvons spécifier le contenu par défaut pour le slot du composant enfant, tel que 🎜rrreee🎜À ce stade, code du composant parent 1>Afficher le contenu par défaut🎜🎜🎜🎜Composant parent 2 affiche le contenu fourni🎜🎜🎜

🎜Emplacement nommé🎜🎜🎜Plusieurs fois un emplacement ne peut pas nous satisfaire. Pour nos besoins, nous avons besoin de plusieurs <code>slots. Il y a donc un slot nommé, qui est un slot avec un nom. Pour faire simple, le but de cet emplacement nommé est de piéger les carottes et de les laisser rester là où elles devraient. Par exemple, l'emplacement <slot name="xx"></slot> avec name est appelé un emplacement nommé. Un <slot></slot> qui ne fournit pas de nom sera implicitement nommé "default". Dans le composant parent, vous pouvez utiliser l'élément <template></template> de la directive v-slot:xxx (peut être abrégé en #xxx) pour définir l'emplacement cible Le nom est transmis pour correspondre au slot correspondant. Par exemple🎜rrreee🎜 🎜 🎜Il n'y a donc pas lieu de s'inquiéter de l'ordre dans le composant parent. Il vous suffit d'écrire le modèle et de le nommer, et il ira automatiquement à son emplacement correspondant. 🎜

🎜Nom de l'emplacement dynamique🎜🎜🎜Le nom de l'emplacement dynamique est le nom de l'emplacement sous la forme d'une variable. Nous pouvons modifier cette variable à tout moment pour afficher différents effets. Il s'écrit v-slot:[nom de la variable] ou abrégé en #[nom de la variable]. 🎜rrreee

🎜Scope slots🎜🎜

🎜Scope slots🎜

🎜Dit ci-dessus Contenu du slot Nous ne pouvons pas accéder aux données des sous-composants, mais que se passe-t-il si nous voulons accéder au statut des sous-composants dans le contenu du slot ? 🎜🎜En fait, slot peut être transmis à la balise slot comme passer des accessoires à un composant peut être lié à la balise slot et. transmis au slot content dans le composant parent. Tout d'abord, jetons un coup d'œil à la méthode de transfert de valeur du slot par défaut🎜rrreee🎜Vous pouvez également obtenir les données fournies par slot sous la forme d'une structure🎜rrreee🎜🎜🎜

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!