So verwenden Sie Platzhalter in Vue-js-Tutorial-php.cn

So verwenden Sie Platzhalter in Vue

php中世界最好的语言

Freigeben： 2018-04-12 14:58:28

Original

12983 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Platzhalter in Vue verwenden. Um es einfach auszudrücken, es ist ein Platzhalter. Er hilft Ihnen, die Position zu besetzen. Wenn Sie ihn benötigen, können Sie ihn direkt übergeben und er wird für Sie angezeigt.

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 Steckplatz:

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

<!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('my-component', {
       // 有效，因为是在正确的作用域内
       template: '<p>\
              <h2>我是子组件的标题</h2>\
              <slot>只有在没有要分发的内容时才会显示。</slot>\
            </p>',
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })
    </script>
  </body>
</html>

Nach dem Login kopieren

Benannte Slots:

Benannte Slots müssen, wie der Name schon sagt, bei mehreren Slot-Tags ihren eigenen Namen vergeben. Beim Aufrufen der übergeordneten Komponente ist „slot="interner entsprechender Name" erforderlich Komponente Der übergebene Standard-HTML-Code wird vollständig im namenlosen Slot-Tag ausgegeben.

<!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('my-component', {
       // 有效，因为是在正确的作用域内
       template: '<p class="container">\
             <header>\
              <slot name="header"></slot>\
             </header>\
              <main>\
              <slot></slot>\
             </main>\
             <footer>\
              <slot name="footer"></slot>\
             </footer>\
            </p>',
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })
    </script>
  </body>
</html>

Nach dem Login kopieren

Scope-Steckplatz

Ein Bereichsslot ist ein spezieller Slottyp, der als wiederverwendbare Vorlage (an die Daten übergeben werden können) anstelle eines bereits gerenderten Elements dient.

<!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('child',{
        template:'<ul>' +
              '<slot text="hello from child"></slot>' +
             '</ul>',
        data:function(){
         return {
         }
        },
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })
    </script>
  </body>
</html>

Nach dem Login kopieren

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 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: 🎜>So implementieren Sie die Todolist-Funktion in Yuansheng JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Platzhalter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!