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!