您可以使用与其他属性相同的方法：定义一个用于填充的属性，并在组件的计算值中为设置默认值。

<template>
    <button
        @click="onClick"
        :disabled="disabled"
        class="begin-btn"
        :style="backgroundColor + textColor + calculatedPadding"
    >{{ text }}
    </button>
</template>

<script>
export default {
    name: 'ButtonComponent',
    props: {
        text: String,
        disabled: Boolean,
        width: String,
        bgColor: String,
        txtColor: String,
        padding: String
    },
    data() {
        return {}
    },
    computed: {
        calculatedPadding(){
            const paddingString = this.padding || '10px'; // default padding
            return 'padding:' + paddingString + ';';
        },

        backgroundColor(){
            let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
            return "background: " + bgColor + ';';
        },

        textColor(){
            let textColor = this.txtColor ? this.txtColor : '#ffffff'
            return "color: " + textColor  + ';';
        }
    },
    methods: {
        onClick() {
            this.$emit("onClick");
        },
    },
}
</script>

然后，用使用组件的另一个模板中所需的值覆盖该填充值：SomeView.vue

<template>
    <div>
    <ButtonComponent 
        padding="50px 20px" <!-- overriding default padding for our button -->
    ></ButtonComponent>
    </div>
</template>

<script>
import ButtonComponent from '../components/ButtonComponent'

export default {
    // ....
    components:{
        ButtonComponent
    }
    // ....
}
</script>

UPDATE：你甚至不需要计算。下面的代码也可以很好地工作：

<template>
<button
    @click="onClick"
    :disabled="disabled"
    class="begin-btn"
    :style="backgroundColor + textColor + 'padding:'+this.padding"
>{{ text }}</button>
</template>

然后将所需的值传递给组件：

<ButtonComponent bg-color="red" padding="10px 20px 100px 20px"></ButtonComponent>

请看下面的片段：

const app = Vue.createApp({
  data() {
    return {
      myStyle: { padding: '12px 15px 12px 15px' },
      Next: 'aaaaaa'
    };
  },
})
app.component('myButton', {
  template: `
  <button 
    @click="onClick"
    :disabled="disabled" 
    class="begin-btn"
    :style="backgroundColor + textColor + getPadding "
  >{{ text }}
  </button>
  `,props: {
    text: String,
    disabled: Boolean,
    width: String,
    bgColor: String,
    txtColor: String,
    padding: String
  },
  data() {
    return {}
  },
  computed: {
    getPadding() {
      return 'padding:' + this.padding.padding
    },
    backgroundColor(){
      let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
      return "background: " + bgColor + ';';
    },
    textColor(){
      let textColor = this.txtColor ? this.txtColor : '#ffffff'
      return "color: " + textColor  + ';';
    }
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
})
app.mount('#demo')

.begin-btn {
  justify-content: center;
  align-items: center;
  border: 0px;
  width: 100%;
  height: 44px;
  background: #d64ba1;
  border-radius: 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <my-button
    @on-click="currentStep = 2"
    :text="Next"
    :padding="myStyle"
  ></my-button>
</div>

您绑定样式属性的方式是正确的，它应该可以工作：请参见此处的示例
在您的示例中，不起作用的是您的Button组件指定了another：style binding internally。您不能同时在内部和外部提供相同的属性。Vue必须选择一个，而Vue选择您的组件定义的属性。

1，使用类名

<Button
          @on-click="currentStep = 2"
          :text= "Next"
          class="btnClass"
       />
::v-deep{
// or other scoped lint
    .btnClass{
    padding: 12px 15px 12px 15px
    }
}

2、 prop 样式Str
按钮使用

<Button
          @on-click="currentStep = 2"
          :text= "Next"
          styleStr="padding: '12px 15px 12px 15px'; " // or other your style
        />

按钮

<template>
  {{ this.color }}
  <button 
    @click="onClick"
    :disabled="disabled" 
    class="begin-btn"
    :style="backgroundColor + textColor + styleStr"
  >{{ text }}
  </button>
</template>

<script>
export default {
  name: 'ButtonComponent',
  props: {
    text: String,
    disabled: Boolean,
    width: String,
    bgColor: String,
    txtColor: String,
    styleStr:String,
  },
  data() {
    return {}
  },
  computed: {

    backgroundColor(){
      let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
      return "background: " + bgColor + ';';
    },

    textColor(){
      let textColor = this.txtColor ? this.txtColor : '#ffffff'
      return "color: " + textColor  + ';';
    }
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
}
</script>

<style scoped>
.begin-btn {
  justify-content: center;
  align-items: center;
  border: 0px;
  width: 100%;
  height: 44px;
  background: #d64ba1;
  border-radius: 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}
</style>

3、 prop 样式对象

<Button
          @on-click="currentStep = 2"
          :text= "Next"
          :styleObj="{padding: '12px 15px 12px 15px'}" 
        />

按钮

<template>
  {{ this.color }}
  <button 
    @click="onClick"
    :disabled="disabled" 
    class="begin-btn"
    :style="backgroundColor + textColor +styleObj"
  >{{ text }}
  </button>
</template>

<script>
export default {
  name: 'ButtonComponent',
  props: {
    text: String,
    disabled: Boolean,
    width: String,
    bgColor: String,
    txtColor: String,
    styleObj:String,
  },
  data() {
    return {}
  },
  computed: {

    backgroundColor(){
      let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
      return "background: " + bgColor + ';';
    },

    textColor(){
      let textColor = this.txtColor ? this.txtColor : '#ffffff'
      return "color: " + textColor  + ';';
    }
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
}
</script>

<style scoped>
.begin-btn {
  justify-content: center;
  align-items: center;
  border: 0px;
  width: 100%;
  height: 44px;
  background: #d64ba1;
  border-radius: 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}
</style>