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' } } })
[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!