Explication détaillée des étapes de transfert et de distribution de données de vue.js

Cette fois, je vais vous donner une explication détaillée des étapes de transfert et de distribution de données de vue.js Quelles sont les précautions pour le transfert et la distribution de données de vue.js. est un cas pratique. Levez-vous et jetez un œil.

1. Transfert de données entre composants

1. Le composant parent obtient les données du composant enfant 

*Le composant enfant envoie ses propres données au parent

*vm.$emit(Événement nom, données);

*v-on : @

Exemple d'utilisation : lorsque vous cliquez sur le bouton Envoyer, "111" se transforme en "Je suis les données du composant enfant"

nbsp;html>


  <meta>
  <title>父级获取子级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
  <bbb></bbb>
</template>
<template>
  <h3 id="子组件">子组件-</h3>
  <input>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aaa&#39;,
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          &#39;bbb&#39;:{
            data:function(){
              return {
                a:&#39;我是子组件的数据&#39;
              }
            },
            template:&#39;#bbb&#39;,
            methods:{
              send:function(){
                this.$emit(&#39;child-msg&#39;,this.a);
              }
            }
          }
        }
      }
    }
  });
</script>

2. Le composant enfant obtient les données du composant parent

Lors de l'appel du sous-composant :

Au sein des composants enfants :

props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
        }

nbsp;html>


  <meta>
  <title>自己获取父级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  </p><p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>

<template>
  <h1 id="">11111</h1>
  <bbb></bbb>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;a&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aa&#39;,
        components:{
          &#39;bbb&#39;:{
            props:{
              &#39;mmm&#39;:String,
              &#39;myMsg&#39;:Number
            },
            template:&#39;<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}&#39;
          }
        }
      }
    }
  });
</script>

Résultats en cours d'exécution :

2. Diffusion du contenu :

Vue.js fournit un moyen de mélanger le contenu du composant parent et le propre modèle du composant enfant : slot, utilisé pour occuper une position

1. Utilisation de base 

nbsp;html>


  <meta>
  <title>slot保留原来的位置</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>
  <h1 id="xxxx">xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });
</script>

Résultat de l'opération : Le contenu de la balise ul n'a pas été écrasé. Si le slot n'est pas utilisé, le contenu de la balise ul sera écrasé

.

2. Le nom attribut de la machine à sous  

nbsp;html>


  <meta>
  <title>slot中name属性的使用</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
    <ul>    //这里slot的名字要与下面slot中name属性相对应
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
    <ol>    //用法同上
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ol>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>  
  <h1 id="xxxx">xxxx</h1>
  <slot>这是默认的情况</slot>      //设置name属性，给slot命名
  <p>welcome vue</p>
  <slot>这是默认的情况2</slot>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });
</script>

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

Lecture recommandée :

Comment rendre la méthode publique de requête ajax dans Vue

Explication détaillée de l'utilisation d'EventLoop dans 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!