Heim > Artikel > Web-Frontend > So verwenden Sie Slots, um Inhalte über Slots in Vue zu verteilen

So verwenden Sie Slots, um Inhalte über Slots in Vue zu verteilen

亚连Original: 2018-06-02 10:24:351778Durchsuche

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Slots zum Verteilen von Inhalten in Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee ist einfach ein Platzhalter. Wenn Sie ihn benötigen, können Sie ihn direkt eingeben.

Einige Leute sagen auch: Requisiten können Daten von übergeordneten Komponenten an untergeordnete Komponenten weitergeben, und Slots können HTML von übergeordneten Komponenten an untergeordnete Komponenten weitergeben. Wie kann man es erreichen?

Einzelner Slot:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p>\
              <h2>我是子组件的标题</h2>\
              <slot>只有在没有要分发的内容时才会显示。</slot>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

Schreiben Sie das Slot-Tag in die Vorlage in der Komponente und übergeben Sie HTML, wenn das übergeordnete Element die untergeordnete Komponente aufruft.

Benannter Slot:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <my-component>
         <h1 slot="header">这里可能是一个页面标题</h1>

         <p>主要内容的一个段落。</p>
         <p>另一个主要段落。</p>

         <p slot="footer">这里有一些联系信息</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p class="container">\
             <header>\
              <slot name="header"></slot>\
             </header>\
              <main>\
              <slot></slot>\
             </main>\
             <footer>\
              <slot name="footer"></slot>\
             </footer>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

Benannter Slot, wie der Name schon sagt, wenn es mehrere Slot-Tags gibt, müssen Sie ihnen eigene Namen geben und sie im aufrufen Wenn ein unbenannter Slot-Tag vorhanden ist, wird der von der übergeordneten Komponente übergebene Standard-HTML-Code vollständig im unbenannten Slot-Tag ausgegeben.

Scope-Slot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
       <!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
       <child>
        <template scope="props">
         <span>hello from parent</span><br>
         <span>{{ props.text }}</span>
        </template>
      </child>
    </p>
    <script type="text/javascript">
      // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
      Vue.component(&#39;child&#39;,{
        template:&#39;<ul>&#39; +
              &#39;<slot text="hello from child"></slot>&#39; +
             &#39;</ul>&#39;,
        data:function(){
         return {

         }
        },
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

Ein Scope-Slot ist ein spezieller Slot-Typ, der als wiederverwendbare Vorlage (an die Daten übergeben werden können) verwendet wird, um bereits gerenderte Elemente zu ersetzen.

entspricht tatsächlich der Tatsache, dass das von der untergeordneten Komponente übergebene Requisitenobjekt in der übergeordneten Komponente abgerufen und in der übergeordneten Komponente gerendert werden kann.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Bootstrap implementiert ein zusammenklappbares, gruppiertes seitliches Navigationsmenü

Vue.js+Layer-Tabellendatenbindung und -implementierung Aktualisierte Instanz

vue.js verschachtelte Schleife, bei Beurteilung, dynamische Löschinstanz

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Slots, um Inhalte über Slots in Vue zu verteilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Was sind einige Tipps für die Verwendung von ES6?Nächster Artikel：Was sind einige Tipps für die Verwendung von ES6?

In Verbindung stehende Artikel

Mehr sehen