Detaillierte Erläuterung der Verwendung von Vue-Scope-Slots-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von Vue-Scope-Slots

php中世界最好的语言

Freigeben： 2018-04-19 09:38:48

Original

2601 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung von Vue-Scope-Slots. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue-Scope-Slots?

Zum Beispiel habe ich eine Listengruppe geschrieben, die Streifen realisieren kann. Nach der Veröffentlichung kann der Benutzer den Inhalt oder Stil jeder Zeile anpassen (ein normaler Slot kann die Aufgabe erfüllen). . Der Schlüssel zum Gültigkeitsbereich von Slots besteht darin, dass die übergeordnete Komponente Parameter empfangen kann, die vom Slot der untergeordneten Komponente übergeben werden. Weitere Informationen finden Sie im Fall und in der -Anmerkung .

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS implementiert die Bewertung mit Bewertungssternen

js implementiert das Ein- und Ausblenden von Bildern gleichzeitig einheitliche Geschwindigkeit

JS implementiert Datenvalidierung und Übermittlung von Kontrollkästchen-Formularen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vue-Scope-Slots. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!