Die Vue-Komponente ändert die Datenmethode der Root-Instanz (mit Code).

In diesem Artikel geht es um die Datenmethode der Vue-Komponente zum Ändern der Root-Instanz (mit Code). Ich hoffe, dass sie für Freunde hilfreich ist.

Ideen:
1 Warten Sie auf Ereignisse innerhalb der Komponente und geben Sie das Ereignis aus.
2 Warten Sie auf das Ereignis, das auf der Komponente ausgegeben wird.
3 Wenn das Ereignis auftritt, führen Sie die entsprechende Funktion zum Ändern aus die Root-Instanzdaten

Implementierung:
1 Hören Sie auf das Eingabeereignis im Eingabefeld innerhalb der Komponente und binden Sie das Eingabeereignis
triggerInput-Funktion
2 Wird ausgelöst, wenn Inhalt in die Eingabe eingegeben wird box triggerInput-Funktion
Die triggerInput-Funktion sendet ein Bearbeitungsereignis und den Wert des Eingabefelds nach außen
3 Hören Sie sich dieses Bearbeitungsereignis auf der Komponente an und binden Sie die triggerEdit-Funktion an das Bearbeitungsereignis
4 Dabei Zu diesem Zeitpunkt wird die TriggerEdit-Funktion ausgelöst. Sie können die Daten auf der Root-Instanz ändern

Hinweis:
1 Der erste Parameter der TriggerEdit-Funktion ist der Schlüssel der Root-Instanzdaten, die Sie ändern möchten modifizieren
2 Der zweite Parameter $event ist Routine. Nur mit diesem Parameter können Sie den
Wert des in der Komponente ausgegebenen Eingabefelds
3 in der Funktion „triggerEdit“ abrufen. Sie können die auftretenden Ereignisse abmelden innerhalb der Komponente in der TriggerEdit-Funktion

nbsp;html>

  
    <meta>
    <title></title>
    <script></script>
  
  
    <div>
      根实例的 data message：{{message}}
      <br>
      根实例的 data name：{{name}}
      <br>
      message:
      <component-demo1></component-demo1>
      name:
      <component-demo1></component-demo1>
    </div>
  
  <script>
    Vue.component(&#39;component-demo1&#39;, {
      template: `
        <div>
          组件内的 input：
          <input
            v-on:input=&#39;triggerInput&#39;
          >
        
      `,
      methods: {
        triggerInput: function (e) {
          this.$emit(&#39;edit&#39;, e.target.value)
        },
      },
    })
    var app = new Vue({
      el: &#39;#app&#39;,
      data: {
        message: &#39;hello vue&#39;,
        name: &#39;gua&#39;,
      },
      methods: {
        triggerEdit: function (key, value) {
          this[key] = value
          console.log(event)
        }
      }
    })
  </script>

[Verwandte Empfehlungen: JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonDie Vue-Komponente ändert die Datenmethode der Root-Instanz (mit Code).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!