Maison  >  Article  >  interface Web  >  Exemple de code pour implémenter une liaison de données bidirectionnelle dans un composant Vue

Exemple de code pour implémenter une liaison de données bidirectionnelle dans un composant Vue

不言
不言avant
2019-04-04 10:54:512010parcourir

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer