Vueでボタンコンポーネントを開発する手順の詳細な説明

今回は、Vueでボタンコンポーネントを開発する手順について詳しく説明します。Vueでボタンコンポーネントを開発する際の注意点を実際のケースを見てみましょう。

その時のアイデアについて話し、戻ってきたときにコードを添付しました。

解決策:

1. 親子コンポーネント($refsとprops)を通じて通信します

2. propsはパラメータを受け取り、$refsは子コンポーネントのメソッド

3. を呼び出して送信をクリックしてボタンの状態を変更します。失敗した場合は、ボタンの状態をキャンセルします

src/components/

<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>

の下にbutton.vueを作成します:

<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>

ここで、いくつかの詳細に注意する必要があります:

1.ボタンコンポーネントが形成されると、コンポーネント内で固定されている場合、他の p 要素と相互作用します。

2. 再利用する場合、親コンポーネント内で子コンポーネントのスタイルを変更することはできません。変更を強制したい場合は、別のものを記述し、スコープ付きを削除してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ELがコンテキストパラメータを取得する手順の詳細な説明

EL式が空でないかどうかを判断する方法

以上がVueでボタンコンポーネントを開発する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。