So implementieren Sie den Datenverteilungsslot in vue.js-js-Tutorial-php.cn

So implementieren Sie den Datenverteilungsslot in vue.js

亚连

Freigeben： 2018-06-11 14:12:21

Original

1694 Leute haben es durchsucht

Dieser Artikel analysiert das relevante Wissen über den Datenübertragungs- und Datenverteilungsslot von vue.js anhand von Codebeispielen. Freunde, die sich für diesen Aspekt interessieren, können darauf zurückgreifen.

1. Datenübertragung zwischen Komponenten

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

* Die untergeordnete Komponente sendet ihre eigenen Daten an Parent

*vm.$emit(event name, data);

*v-on: @

Beispielverwendung: Wenn auf die Schaltfläche „Senden“ geklickt wird, wird „111 „wird zu „Ich bin die Daten der untergeordneten Komponente“

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级获取子级的数据</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法，@child-msg和下面的this.$emit(&#39;child-msg&#39;,this.a)相对应
  <bbb @child-msg="get"></bbb>
</template>
<template>
  <h3>子组件-</h3>
  <input type="button" value="send" @click="send">
</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>
</body>
</html>

Nach dem Login kopieren

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

Beim Aufruf der untergeordneten Komponente:

< ;bbb :m= "Data">

Innerhalb der Unterkomponente:

props:[&#39;m&#39;,&#39;myMsg&#39;]
props:{
&#39;m&#39;:String,
&#39;myMsg&#39;:Number
　　　　　　　　}

Nach dem Login kopieren

rrree

Laufergebnis:

2 , Inhaltsverteilung:

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

1. Grundlegende Verwendung

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自己获取父级的数据</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<p>
  <p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>
</p>

<template>
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></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}}</h3>&#39;
          }
        }
      }
    }
  });

</script>
</body>
</html>

Nach dem Login kopieren

Laufergebnis: Der Inhalt im ul-Tag wird nicht überschrieben. Wenn der Slot nicht verwendet wird, wird der Inhalt im ul-Tag überschrieben

2. Slot Das Namensattribut von

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot保留原来的位置</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>

</head>
<body>
<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  <hr>
  <aaa>
  </aaa>
</p>
<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>
</body>
</html>

Nach dem Login kopieren

ergibt:

Das Obige habe ich für alle zusammengestellt an alle in der Zukunft.

Verwandte Artikel:

Erkennen der Verknüpfung zwischen dem Eingabefeld und dem Dropdown-Feld

Erkennen des Click-to-Click Eingabefeld für die Inhaltssynchronisierung im Dropdown-Menü in JS

So verwenden Sie CLI, um mehrseitiges Gerüst in Vue zu rekonstruieren

So ändern Sie das Größe von Objekten durch Ziehen in JS

Probleme beim Scrollen verwandter Bereiche mit cli+mui in Vue

Bezahlte Online-Kurse in Vue (ausführliches Tutorial)

Vergleich der Verwendung von Express und Koa (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Datenverteilungsslot in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!