Heim > Web-Frontend > js-Tutorial > Hauptteil

Codebeispiel für die Implementierung einer bidirektionalen Datenbindung innerhalb einer Vue-Komponente

不言
Freigeben: 2019-04-04 10:55:11
nach vorne
2022 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Codebeispiel für die Implementierung einer bidirektionalen Datenbindung innerhalb der Vue-Komponente. Ich hoffe, dass es einen gewissen Referenzwert hat hilfreich sein.

Idee: Die übergeordnete Komponente übergibt Werte über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente benachrichtigt die übergeordnete Komponente mithilfe von $emit, den entsprechenden Requisitenwert zu ändern. Die spezifische Implementierung lautet wie folgt:
import Vue from 'vue'
const component = {
    props: ['value'],
      template: `
        <div>
            <input type="text" @input="handleInput" :value="value">
        </div>
    `,
      data () {
          return{}
      },
      methods: {
        handleInput (e) {
            this.$emit('input', e.target.value)
        }
    }
}

new Vue({
    components: {
        CompOne: component
      },
      el: '#root',
      template: `
        <div>
          <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
        </div>
      `,
  data () {
    return{
        value: '123'
    }
  }
})
Nach dem Login kopieren

[Verwandte Empfehlungen: JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Implementierung einer bidirektionalen Datenbindung innerhalb einer Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage