Ausführliche Erläuterung der Beispiele für Datenübertragungs- und Datenverteilungsslots von vue.js-js-Tutorial-php.cn

Ausführliche Erläuterung der Beispiele für Datenübertragungs- und Datenverteilungsslots von vue.js

小云云

Freigeben： 2018-05-14 17:23:25

Original

2352 Leute haben es durchsucht

Dieser Artikel analysiert hauptsächlich 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 überträgt seine eigenen Daten, an das übergeordnete Element gesendet

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

*v-on: @

Beispielverwendung: wenn der send Wenn auf die Schaltfläche geklickt wird, wird „111“ 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('child-msg',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:'#box',
    data:{
      a:'aaa'
    },
    components:{
      'aaa':{
        data:function(){
          return {
            msg:111,
            msg2:'我是父组件的数据'
          }
        },
        template:'#aaa',
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          'bbb':{
            data:function(){
              return {
                a:'我是子组件的数据'
              }
            },
            template:'#bbb',
            methods:{
              send:function(){
                this.$emit('child-msg',this.a);
              }
            }
          }
        }
      }
    }
  });
</script>
</body>
</html>

Nach dem Login kopieren

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

, bevor sie die untergeordnete Komponente aufruft :

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

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

2. Inhaltsverteilung:

Vue.js bietet eine Möglichkeit, den Inhalt der übergeordneten Komponente und die eigene Vorlage der untergeordneten Komponente zu mischen: Slot, Wird verwendet, um eine Position zu besetzen

1. Grundlegende Verwendung

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

Laufendes Ergebnis: Der Inhalt im ul-Tag wird nicht überschrieben überschrieben werden

2. Das Namensattribut des Slots

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot中name属性的使用</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
<p>
  <aaa>
    <ul slot="ul-slot">　　　　//这里slot的名字要与下面slot中name属性相对应
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
    <ol slot="ol-slot">　　　　//用法同上
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ol>
  </aaa>
  <hr>
  <aaa>
  </aaa>
</p>
<template>　　
  <h1>xxxx</h1>
  <slot name="ol-slot">这是默认的情况</slot>　　　　　　//设置name属性，给slot命名
  <p>welcome vue</p>
  <slot name="ul-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>
</body>
</html>

Nach dem Login kopieren

Laufergebnisse:

Verwandte Empfehlungen:

Vue Content Distribution Slot

JS-Komponente SlotMachine implementiert Bildwechseleffekt, um Lotteriesystem_Javascript-Fähigkeiten zu erstellen

So verwenden Sie vue.js Datenübertragung zwischen Komponenten

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