suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung von Vue-Scope-Slots

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 09:38:482619Durchsuche

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>

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!

php JS 作用域
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung zur Verwendung verschachtelter einfacher und doppelter Anführungszeichen in JSNächster Artikel：Ausführliche Erläuterung zur Verwendung verschachtelter einfacher und doppelter Anführungszeichen in JS

In Verbindung stehende Artikel

Mehr sehen