Maison > Article > interface Web > Explication détaillée de l'utilisation des emplacements de scope Vue

Explication détaillée de l'utilisation des emplacements de scope Vue

php中世界最好的语言original: 2018-04-19 09:38:482566parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des slots de scope Vue. Quelles sont les précautions lors de l'utilisation des slots de scope Vue ?

Par exemple, j'ai écrit un groupe de listes qui peut réaliser des rayures. Après la publication, l'utilisateur peut personnaliser le contenu ou le style de chaque ligne (un emplacement normal peut faire le travail). . La clé de la portée des slots est que le composant parent peut recevoir les paramètres transmis depuis le slot du composant enfant. Pour plus de détails, voir le cas et l'annotation .

<!DOCTYPE html>
  <htmllang="en">
  <head>
    <metacharset="UTF-8">
    <title>Vue作用域插槽</title>
    <scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <pid="app2">
      <my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
        <!-- props对象接收来自子组件slot的$index参数 -->
        <templateslot="cont"scope="props">
          <span>{{users[props.$index].id}}</span>
          <span>{{users[props.$index].name}}</span>
          <span>{{users[props.$index].age}}</span>
          <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
          <a:href="&#39;#edit/id/&#39;+users[props.$index].id"rel="external nofollow">编辑</a>
          <a:href="&#39;#del/id/&#39;+users[props.$index].id"rel="external nofollow">删除</a>
        </template>
      </my-stripe-list>
    </p>
    <script>
      Vue.component('my-stripe-list', {
        /*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"></slot>
            </p>
          </p>
        `,
        props: {
          items: Array,
          oddBgcolor: String,
          evenBgcolor: String
        }
      });
      new Vue({
        el: '#app2',
        data: {
          users: [
            {id: 1, name: '张三', age: 20},
            {id: 2, name: '李四', age: 22},
            {id: 3, name: '王五', age: 27},
            {id: 4, name: '张龙', age: 27},
            {id: 5, name: '赵虎', age: 27}
          ]
        }
      });
    </script>
  </body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente le classement par étoiles d'évaluation

js implémente le fondu d'entrée et de sortie d'image à un moment donné vitesse uniforme

JS implémente la validation des données et la soumission du formulaire de case à cocher

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!

php JS 作用域

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée sur l'utilisation des guillemets simples et doubles imbriqués dans JSArticle suivant：Explication détaillée sur l'utilisation des guillemets simples et doubles imbriqués dans JS

Articles Liés

Voir plus