以自定义组件输入框为例

给输入框动态绑定style变量，变量为一个对象，当然也可以是单个样式，多个样式的时候用对象

<template name="Search">
  <div class="">
    <div >
      <input
        type="text"
        v-model="searchText"
        placeholder="请输入"
        @focus="searchFocus"
        :style="searchStyle"
      />
     <!-- <i class="el-icon-search"></i> -->
    </div>
  </div>
</template>

然后动态绑定的样式子组件以props的形式接收父组件传入的样式，可以在此处加上默认样式

  props: {
    searchStyle: {
      type: Object,
      default: function () {
        return {
          height: "30px",
          borderRadius: "5px", //样式key值为多个单词时用驼峰命名
          borderColor: "skyblue",
        };
      },
    },
  },

使用的时候传入对应的样式即可

<template>
  <div class="page">
    <div>默认样式<search></search></div>
    <div>自定义样式一<search :searchStyle="searchStyle"></search></div>
    <div>自定义样式二<search :searchStyle="searchStyleTwo"></search></div>
  </div>
</template>

  data() {
    return {
      searchStyle: {
        height: "30px",
        borderRadius: "5px",
        borderColor: "red",
      },
      searchStyleTwo: {
        height: "30px",
        borderRadius: "5px",
        borderColor: "green",
        backgroundColor: "skyblue",
      },
    };
  },

效果演示：在一个页面引入同一个组件设置不同的样式