Comment utiliser Vue pour activer le v-model dans un composant personnalisé

Cette fois, je vais vous expliquer comment utiliser vue pour activer le v-model dans un composant défini personnalisé, et comment utiliser vue pour activer le v-model dans un composant personnaliséNotes De quoi s’agit-il ? Voici des cas concrets.

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 :

Comment utiliser WebPack pour configurer une vue multi-page

Comment utiliser Webpack pour créer un environnement de développement de réaction

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!