Comment utiliser les espaces réservés dans Vue-js tutoriel-php.cn

Comment utiliser les espaces réservés dans Vue

php中世界最好的语言

Libérer： 2018-04-12 14:58:28

original

13024 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser les espaces réservés dans Vue. Quelles sont les précautions lors de l'utilisation des espaces réservés dans Vue.

Pour faire simple, c'est un espace réservé. Il vous aidera à occuper le poste. Lorsque vous en aurez besoin, vous pourrez directement passer le 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 emplacements peuvent transmettre du HTML des composants parents aux composants enfants. Alors comment y parvenir ?

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

Copier après la connexion

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

Emplacements nommés :

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

Copier après la connexion

Slots nommés, comme son nom l'indique, lorsqu'il y a plusieurs balises slot, vous devez leur donner leurs propres noms. Lors de l'appel du composant parent, slot="nom correspondant interne" est requis. Lorsqu'il existe une balise slot sans nom, le parent. composant Le code HTML par défaut transmis sera entièrement affiché dans la balise slot sans nom.

Emplacement de portée

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

Copier après la connexion

Un slot scoped est un type spécial de slot qui est utilisé comme modèle réutilisable (auquel les données peuvent être transmises) à la place d'un élément déjà rendu.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois . !

Lecture recommandée : 🎜>Comment implémenter la fonction todolist dans Yuansheng JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!