Maison > Article > interface Web > Exemple de code pour implémenter une liaison de données bidirectionnelle dans un composant Vue
Le contenu de cet article concerne l'exemple de code d'implémentation d'une liaison de données bidirectionnelle à l'intérieur du composant Vue. Il a une certaine valeur de référence. J'espère que les amis dans le besoin pourront s'y référer. vous être utile.
Idée : le composant parent transmet les valeurs au composant enfant via des accessoires, et le composant enfant utilise $emit pour notifier au composant parent de modifier la valeur des accessoires correspondante. L'implémentation spécifique est la suivante :
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' } } })[Recommandations associées :
Tutoriel vidéo JavaScript]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!