Utiliser des emplacements pour transmettre des données du composant parent au composant enfant dans Vue.js

Cet article vous présentera comment utiliser les emplacements Vue pour transmettre des données des composants parents aux composants enfants dans Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Cet article convient aux développeurs de tous niveaux (y compris les débutants).

Avant de commencer

Vous aurez besoin des éléments suivants sur votre ordinateur :

• Déjà installé Node.js version 10.x et supérieure. Vous pouvez vérifier la version en exécutant la commande suivante dans Terminal/Invite de commandes : node -v

• L'éditeur de code Visual Studio est recommandé

• La dernière version de Vue, installée globalement sur votre ordinateur

• Vue CLI 3.0 est installée sur votre ordinateur. Pour cela, désinstallez d'abord l'ancienne version CLI :

npm uninstall -g vue-cli

Ensuite, installez la nouvelle :

npm install -g @ vue / cli

• Téléchargez ici

  Vue Projet de démarrage

• Décompressez le projet téléchargé

• Accédez au fichier décompressé et exécutez la commande pour garder toutes les dépendances à jour :

npm install

Que sont les machines à sous Vue ?

Vue slot est un élément de modèle Vue créé par l'équipe Vue pour fournir une plate-forme de distribution de contenu de modèle. Il s'agit d'une implémentation de l'API Content Distribution inspirée du projet de spécification des composants Web. À l'aide des emplacements Vue, vous pouvez transmettre ou distribuer du code HTML entre différents composants de votre projet.

Pourquoi les machines à sous Vue sont-elles importantes ?

La distribution de contenu est importante pour de nombreuses raisons, dont certaines sont liées à la structure. À l'aide des slots Vue, une interface HTML peut être construite (similaire à TypeScript) qui peut ensuite être utilisée comme guide pour créer des composants via l'injection de modèles. Il s'agit d'une solution très évolutive et efficace pour transmettre du code de modèle d'un composant à un autre.

Le positionnement du contenu est un autre excellent cas d'utilisation des machines à sous Vue. Vous créez simplement un modèle, puis utilisez un autre composant ou composant parent pour organiser le modèle comme vous souhaitez qu'il apparaisse dans l'interface utilisateur.

Slots contre accessoires

Si vous connaissez les machines à sous Vue, vous vous demandez peut-être si les accessoires et les machines à sous font la même chose. Eh bien, l'idée centrale de ces outils ou plateformes est d'encourager la réutilisabilité et l'efficacité des ressources. Dans cette optique, les machines à sous et les accessoires sont similaires.

Props gère la transmission des objets de données entre les composants, tandis que slot gère la transmission du contenu du modèle (html) entre les composants. Cependant, les emplacements limités se comportent exactement comme des accessoires ; cela sera clairement expliqué dans ce didacticiel.

Syntaxe des slots Vue

Pour les slots, votre sous-composant agit comme une interface ou une structure indiquant la façon dont vous souhaitez que votre contenu soit organisé. Cela pourrait ressembler à ceci :

<template>
  <div>
    <slot></slot>
  </div>
</template>

Le composant parent (où se trouve le contenu HTML à injecter dans le composant enfant) pourrait ressembler à ceci :

<Test>
   <h2>Hello World!</h2>
 </Test>

Cette combinaison renverra une interface utilisateur qui ressemble à ceci :

<template>
  <div>
    <h2>Hello World!</h2>
  </div>
</template>

Notez comment la machine à sous elle-même sert de guide pour savoir où et comment le contenu doit être injecté - c'est l'idée centrale.

Démo

Si vous avez suivi cet article depuis le début, vous aurez le projet

ouvert en vs code. Pour illustrer l'exemple simple de la section syntaxe, notre composant parent sera le fichier vue starter. Ouvrez le fichier app.vue et copiez dans ce bloc de code : app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2>Hello World!</h2>
    </Test>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>

Le composant enfant sera le composant de test, copiez donc le bloc de code ci-dessous dans le fichier

 : test.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

Utiliser la commande suivante pour exécuter l'application dans l'environnement de développement :

npm run serve

Slots nommés

Vue permet à un composant d'avoir plusieurs emplacements, ce qui signifie Vous pouvez avoir n'importe quel nombre d'emplacements. Pour tester cette fonctionnalité, copiez ce nouveau bloc de code dans le fichier

: test.vue

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

Si vous lancez l'application, vous pouvez voir que

est imprimé trois fois. Ainsi, si vous souhaitez ajouter plus de contenu (par exemple, un titre, un paragraphe avec du texte, puis une liste non ordonnée), Vue nous permet de nommer la portée afin qu'elle puisse identifier la portée spécifique à afficher. Nommez les slots dans le fichier hello world comme suit : test.vue

<template>
  <div>
    <slot name="header"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

Désormais, ces éléments HTML doivent également être marqués en fonction du nom du slot dans lequel ils doivent être affichés. Copiez ceci dans la section modèle du fichier

 : app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2 slot="header">Hello world!</h2>
      <p slot="paragraph">Hello, I am a paragraph text</p>
      <ul slot="links">
        <li>Hello, I am a list item</li>
        <li>Hello, I am a list item</li>
      </ul>
    </Test>
  </div>
</template>

syntaxe v-castle

Lorsque la version 2.6 de VUE est sortie, elle est arrivée avec Création d'une meilleure syntaxe pour référencer les noms d'emplacement dans les sous-composants nommés

, ce qui impliquait le remplacement de la syntaxe d'emplacement initiale. Ainsi, au lieu de remplacer le modèle de composant parent par un emplacement comme celui-ci : v-slot

<Test>
   <h1 slot="header">Hello world!</h1>
</Test>

À partir de la version 3.0, il ressemblera désormais à ceci :

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

注意，除了字符串从slot到v-slot的细微变化外，还有一个重大变化：v-slot只能在模板上定义，而不能在任何html元素上定义。这是一个很大的变化，因为它质疑命名插槽的可用性，但截至本文撰写之时，插槽仍然是文档的很大一部分。

作用域插槽

设想一个场景，其中Vue插槽还可以从父组件访问子组件中的数据对象，这是一种具有道具功能的插槽。要说明这一点，请继续，通过将下面的代码块复制到test.vue文件中，在子组件中创建一个数据对象：

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与普通props一样，v-bind指令用于将数据中的团队与父组件中的prop引用绑定。打开app.vue文件并将下面的代码块复制到模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

如果运行应用程序，您将看到数据对象已成功传递到父组件。

结论

本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。

英文原文地址：https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

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!