Explication détaillée de l'utilisation des emplacements de scope Vue-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-19 09:38:48

original

2528 Les gens l'ont consulté

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>

Copier après la connexion

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!