vue_vue.js에서 버튼 구성 요소를 개발하기 위한 샘플 코드

이 글에서는 주로 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: &#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>

페이지에서 호출하세요.

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

여기에서 몇 가지 세부 사항에 주의하세요.

1.버튼 컴포넌트가 형성된 후 컴포넌트 내에서 고정되면 해당 컴포넌트와 다른 p 요소 사이의 간격을 재사용하기가 어렵습니다.

2. 재사용 시 상위 컴포넌트에서는 하위 컴포넌트의 스타일을 변경할 수 없습니다. 강제로 변경하려면 별도로 작성하고 범위를 제거하세요.

관련 추천:

vue에서 제공/주입 학습

Vue 프로젝트 API 관련 코드 구성에 대해

위 내용은 vue_vue.js에서 버튼 구성 요소를 개발하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!