Vue에서 버튼 컴포넌트를 개발하려면 무엇을 준비해야 합니까?

이번에는 Vue에서 버튼 컴포넌트를 개발하기 위해 준비해야 할 사항과 Vue에서 버튼 컴포넌트를 개발할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

최근 인터뷰에서 Vue에서 버튼 컴포넌트를 만드는 것에 대한 질문을 받았습니다.

그때 아이디어만 이야기하고 돌아와서 코드를 첨부했습니다.

해결책:

1. 부모-자식 구성 요소($refs 및 props)를 통해 통신합니다.

2. props는 매개 변수를 허용하고 $refs는 하위 구성 요소

3. 의 메서드를 호출하여 제출을 클릭하여 버튼 상태를 변경합니다. 실패하면 버튼 상태를 취소하세요

src/comComponents/

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

페이지에서 호출하세요:

<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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 왼쪽 목록을 오른쪽으로 이동

WeChat 애플릿 페이지를 공유하고 홈페이지로 돌아갑니다

위 내용은 Vue에서 버튼 컴포넌트를 개발하려면 무엇을 준비해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!