Explication détaillée des étapes d'utilisation de v-model dans les composants personnalisés dans vue

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de v-model dans des composants définis personnalisés par Vue Quelles sont les précautions pour utiliser v-model dans custom. composants par Vue ? Ce qui suit est un cas pratique, jetons un coup d'œil.

directive v-model

La soi-disant "commande" étend en fait la fonction (attribut) de la balise HTML .

Commençons par une composante, sans vue-model, une communication père-fils normale

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

Après avoir cliqué pour répondre, ce que le père a dit à son fils devient la réponse du fils . Les informations reçues par le fils ont également changé, permettant la communication.

Passer au v-model

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
    prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

Bien que la rédaction soit différente, l'effet est finalement le même.

Regardez le v-model du composant personnalisé officiel

Exemple officielhttps://vuefe.cn/v2/api/#model

Il y a cette phrase : Par défaut, le v-model sur un composant utilisera la valeur comme accessoire et l'entrée comme événement.

Essayez de changer l'exemple de sous-composant ci-dessus, et cela fonctionnera

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{value}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>

Résumons :

Si vous êtes paresseux et que vous ne souhaitez pas gérer l'événement vous-même, utilisez l'événement 'value' && 'input' par défaut pour le gérer. Si vous utilisez des événements natifs, même l'attribut model peut être omis.

Si vous souhaitez que votre code soit plus clair et distingue les événements personnalisés, alors la combinaison suivante est faite pour vous.

La définition de l'accessoire et de l'événement dépend de votre propre humeur, bien sûr, vous devez connaître votre opinion [essayez d'éviter les mots-clés]

model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus excitant. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Vue utilise l'analyse par étapes d'icône personnalisée

Utiliser l'analyse par étapes Mockjs dans le projet vue-cli

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!