Detaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.js

Dieses Mal werde ich Ihnen die Datenübertragungs- und Datenverteilungsschritte von vue.js im Folgenden ausführlich erläutern ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

1. Datenübertragung zwischen Komponenten

1. Die übergeordnete Komponente erhält die Daten der untergeordneten Komponente 

*Die untergeordnete Komponente sendet ihre eigenen Daten an die übergeordnete Komponente

*vm.$emit(

Ereignis

Name, Daten); *v-on: @

Beispielverwendung: Wenn auf die Schaltfläche „Senden“

geklickt wird, ändert sich „111“ in „Ich bin die Daten der untergeordneten Komponente“

2. Die untergeordnete Komponente erhält die Daten der übergeordneten Komponente

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>子组件-</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>

Beim Aufruf der Unterkomponente:

Innerhalb untergeordneter Komponenten:

Laufergebnisse:

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

2. Inhaltsverteilung:

Vue.js bietet eine Möglichkeit, den Inhalt der übergeordneten Komponente und der eigenen Vorlage der untergeordneten Komponente zu mischen: Slot, der zum Besetzen einer Position

verwendet wird 1. Grundlegende Verwendung 

Ergebnis des Vorgangs: Der Inhalt im ul-Tag wurde nicht überschrieben. Wenn der Steckplatz nicht verwendet wird, wird der Inhalt im ul-Tag überschrieben

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

2. Der Name Attribut des Slots

 

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 die chinesische PHP-Website!

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

Empfohlene Lektüre:

So machen Sie eine Ajax-Anfrage zu einer öffentlichen Methode in Vue

Detaillierte Erläuterung der Verwendung von EventLoop in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!