Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2019-04-04 10:55:11
avant
1995 Les gens l'ont consulté

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'
    }
  }
})
Copier après la connexion
[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!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!