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

Explication détaillée des étapes pour développer des composants de bouton dans Vue

php中世界最好的语言
Libérer: 2018-05-08 14:23:53
original
1564 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour développer des composants de boutons dans Vue. Quelles sont les précautions pour développer des composants de boutons dans Vue. Voici des cas pratiques, jetons un coup d'œil.

Je viens de parler de mes idées à ce moment-là et j'ai joint le code à mon retour.

Solution :

  1. Communication via des composants parent-enfant ($refs et props)

  2. props accepte les paramètres, $refs appels La méthode du sous-composant

  3. est utilisée pour changer l'état du bouton en cliquant sur Soumettre. En cas d'échec, l'état du bouton est annulé

est construit sous src/components/ Un bouton.vue

<template>
<!-- use plane -->
<!-- 传入bgColor改变按钮背景色 -->
<!-- state切换button的状态 调用cancel()可以切换 -->
<!-- text为按钮文字 -->
 <p class="container">
  <button 
   @click="confirm"
   :disabled="state" 
   class="confirm" 
   :style="{background: btnData.bgColor}"
  >{{text}}</button>
 </p>
</template>
<script>
export default {
 data(){
  return {
   text: this.btnData.text,
   state: false,
  }
 },
 props: {
  btnData: {
   types: Array,
   default() {
    return {
     text: '确认',
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += '...'
   this.state = true
   //这里是激活父组件的事件,因为子组件是不会冒泡到父组件上的,必须手动调用$emit
   //相对应父组件要在调用该组件的时候,将其挂载到上面
   this.$emit("confirm")
  },
  cancel(){
   this.text = this.btnData.text
   this.state = false
  }
 }
}
</script>
<style lang="less" scoped>
.confirm {
 border: none;
 color: #fff;
 width: 100%;
 padding: 1rem 0;
 border-radius: 4px;
 font-size: 1.6rem;
 background: #5da1fd;
 &:focus {
  outline: none;
 }
}
</style>
Copier après la connexion
est appelé dans la page :

<template>
  <p class="btn-box">
   <Btn 
    :btnData="{text: &#39;确认注册&#39;}"
    <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"-->
    @confirm="confirm"
    ref="btn"
   ></Btn>
  </p> 
</template>
<script>
import Btn from '@/components/button'
export default {
 components: {
  Btn
 },
 methods: {
  confirm(){
   if(!this.companyName){
    this.$toast("公司名不能为空") 
    this.$refs.btn.cancel()
   }
 }
}
</script>
Copier après la connexion
Ici, vous devez faire attention à certains détails :

1. Une fois le composant bouton formé, il interagit avec d'autres p L'espacement des éléments est difficile à réutiliser s'il est fixé dans le composant.

2. Lors de la réutilisation, le style du composant enfant ne peut pas être modifié dans le composant parent. Si vous souhaitez forcer le changement, écrivez-en un séparé et supprimez la portée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes permettant à EL d'obtenir les paramètres de contexte

Comment déterminer si l'expression el n'est pas vide

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:php.cn
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!