Maison > Article > interface Web > Comment utiliser les emplacements pour distribuer du contenu via les emplacements dans Vue

Comment utiliser les emplacements pour distribuer du contenu via les emplacements dans Vue

亚连original: 2018-06-02 10:24:351774parcourir

Cet article présente principalement la méthode d'utilisation des slots pour distribuer du contenu dans Vue. Maintenant, je le partage avec vous et le donne comme référence. La balise

58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee est simplement un espace réservé. Elle vous aidera à occuper le poste. Lorsque vous en aurez besoin, vous pourrez directement transmettre le code HTML et il l'affichera pour vous.

Certaines personnes disent également : les accessoires peuvent transmettre des données des composants parents aux composants enfants, et les slots peuvent transmettre du HTML des composants parents aux composants enfants. Alors comment y parvenir ?

Slot unique :

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

Écrivez la balise slot dans le modèle du composant, et transmettez-la en html lorsque le parent appelle le composant enfant.

Emplacement nommé :

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

Emplacement nommé, comme son nom l'indique, lorsqu'il y a plusieurs balises d'emplacement, vous devez leur donner leur propre nom, dans le parent Slot="nom correspondant interne" est requis lors de l'appel du composant Lorsqu'il existe une balise slot sans nom, le code html par défaut transmis par le composant parent sera entièrement affiché dans la balise slot sans nom.

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>

Un scope slot est un type spécial d'emplacement qui sert de modèle d'emplacement réutilisable pour remplacer les éléments déjà rendus.

équivaut en fait à obtenir l'objet props transmis par le composant enfant dans le composant parent et à le restituer au composant parent.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus