So implementieren Sie die Komponenten- und Eltern-Kind-Komponentenkommunikation in Vue2.0-js-Tutorial-php.cn

So implementieren Sie die Komponenten- und Eltern-Kind-Komponentenkommunikation in Vue2.0

亚连

Freigeben： 2018-06-21 13:56:48

Original

1608 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Vue 2.0-Lernens, der Vue-Komponenten und der Eltern-Kind-Komponentenkommunikation vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Was sind Komponenten?

Die Komponenten in vue sind tatsächlich Teil der Seite, genau wie jede Komponente im Computer (z. B. Festplatte, Tastatur, Maus) und verfügen gleichzeitig über eine unabhängige Logik oder Schnittstelle können Die angegebenen Schnittstellenregeln werden miteinander integriert, um eine vollständige Anwendung zu erhalten.

Die Seite besteht aus solchen Teilen wie Navigation, Listen, Popup-Fenstern, Dropdown-Listen usw. Die Seite ist nur ein Container für diese Komponenten. Die Komponenten werden frei kombiniert, um eine voll funktionsfähige Schnittstelle zu bilden. Wenn eine Komponente nicht benötigt wird oder Sie sie ersetzen möchten, können Sie sie jederzeit ersetzen, ohne den Betrieb zu beeinträchtigen gesamte Anwendung.

Die Kernidee der Front-End-Komponentisierung besteht darin, eine große und komplexe Sache mit angemessener Granularität in kleine Dinge aufzuteilen.

Welche Vorteile bietet der Einsatz von Komponenten?

1. Erleichtern Sie die Wiederverwendung
3. Vereinfachen Sie die Wartbarkeit des gesamten Projekts
🎜>

Komponente in Vue

Die Komponente in Vue ist ein benutzerdefiniertes Tag, und der Compiler von vue.js fügt ihm spezielle Funktionen hinzuKomponente in Vue Das können Sie auch Erweitern Sie native HTML-Elemente, um wiederverwendbaren Code zu kapseln

Grundkomponenten von Komponenten: Stilstruktur, Verhaltenslogik, Daten

Registrierte Komponente

Global Registrierung

kann in jeder Vorlage verwendet werden, Sie müssen sich vor der Verwendung registrieren

Syntax: Vue.component verwenden (Komponentenname, Optionsobjekt)

Benennung des Komponentennamens Konvention: Camel Case, Kebab

Verwendung von Komponenten in HTML: Benennungskonvention für Kebab verwenden

Registrieren Sie beispielsweise Vue.component('my-component',{}) , wenn Sie

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

Nach dem Login kopieren

, wenn Sie es verwenden, müssen Sie diese Komponente nur auf der Seite aufrufen, um sie zu verwenden, und sie kann wiederverwendet werden.

Component.png

Lokale Registrierung

Registriert über das Optionsobjekt in der Komponenteninstanz, nur wo Komponenten, die lokal mit

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  new Vue({
    el:"#app",
    components:{
      &#39;cus-list&#39;:{
        template:`
          <section>
            <p>
              <p>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </p>
            </p>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

Nach dem Login kopieren

im registrierten Bereich registriert wurden, können nur im Bereich der aktuellen Instanz verwendet werden und können auch im Bereich wiederverwendet werden. Der Effekt ist wie folgt.

Component.png

Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Kommunikation zwischen Eltern und untergeordneten Komponenten Komponenten

Übergeordnete Komponente===>Untergeordnete Komponente (unter Verwendung von Requisiten)

Der Bereich der Komponenteninstanz ist isoliert und die untergeordnete Komponente kann die Daten der übergeordneten Komponente nicht direkt verwenden .

Sie können benutzerdefinierte Attribute verwenden, um Daten an die Komponente zu binden, und Requisiten verwenden, um den Attributnamen anzupassen, der in der Komponente angezeigt werden soll.

Mit anderen Worten, erinnern Sie sich an einen Satz: Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente überträgt, bedeutet dies, beim Aufrufen der Komponente ein Attribut zur Komponente hinzuzufügen und es dann mithilfe von Requisiten in der Komponente zu empfangen . Es kann entsprechend dem Attributnamen in der Komponente verwendet werden.

<p id="app">
  <h2>自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  Vue.component(&#39;cus-list&#39;,{
    data(){

    },
    props:[&#39;btnValue&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

Nach dem Login kopieren

Seiteneffekt

props pass value.png

Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente

Unterkomponente ===》Übergeordnete Komponente

muss benutzerdefinierte Zeit verwenden. Die übergeordnete Komponente verwendet $on, um benutzerdefinierte Ereignisse abzuhören, und $emit löst Anpassungen aus Die übergeordnete Komponente kümmert sich um das Ereignis.

1. Definieren Sie den Ereignisinhalt in der Unterkomponente

2. Benutzerdefiniertes v-on-Ereignis in der übergeordneten Komponente zum Empfangen von v-on:receive="changeValue"

3. Wenn das untergeordnete Komponentenereignis ausgelöst wird, benachrichtigt $emit die übergeordnete Komponente this.$ emit("receive",item);

4. Die übergeordnete Komponente liefert entsprechendes Feedback basierend auf benutzerdefinierten Ereignissen changeValue:function(value){this.val = value;}

Betrachten Sie den folgenden Fall: Wenn Sie auf „Eingabe“ klicken, wird ein Dropdown-Listenfeld angezeigt. Wählen Sie die entsprechende Liste aus und der Listeninhalt wird im Eingabefeld angezeigt.

  <p id="app">
    <h2>自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </p>
  <script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        selectShow:false,
        val:&#39;&#39;
      }
    },
    props:[&#39;selectValue&#39;,&#39;list&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </p>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </p>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component(&#39;list-li&#39;,{
    props:[&#39;list&#39;],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:[&#39;宋仲基&#39;,&#39;余文乐&#39;,&#39;鹿晗&#39;,&#39;陈小春&#39;,&#39;黄晓明&#39;,&#39;易烊千玺&#39;]
    }
  })
  </script>

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lösen Sie den Konflikt zwischen Django- und Vue-Syntax

So crawlen Sie Website-Bilder in NodeJS

Informationen zur Verwendung von ES6/JavaScript (ausführliches Tutorial)

So legen Sie Platzhalter-Eingabeaufforderungstext mithilfe des WeChat-Applets dynamisch fest

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Komponenten- und Eltern-Kind-Komponentenkommunikation in Vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!