Exemple de code pour développer un composant bouton dans vue_vue.js

Cet article présente principalement l'exemple de code pour développer un composant de bouton dans Vue. Maintenant, je le partage avec vous et le donne comme référence. Allons jeter un oeil

Dans une récente interview, on m'a posé une question sur la création d'un composant bouton dans Vue

Je viens de parler de l'idée à l'époque et je l'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: &#39;确认&#39;,
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += &#39;...&#39;
   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>

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 &#39;@/components/button&#39;
export default {
 components: {
  Btn
 },
 methods: {
  confirm(){
   if(!this.companyName){
    this.$toast("公司名不能为空") 
    this.$refs.btn.cancel()
   }
 }
}
</script>

Ici, nous devons faire attention à certains détails :

1 Une fois le composant bouton formé, l'espacement entre celui-ci et les autres éléments p sera difficile à réutiliser si. il est fixé au sein du 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.

Recommandations associées :

Apprentissage fournir/injecter dans vue

Sur l'organisation du code lié à l'API du projet Vue

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!