【vue练习】vue组件自定义样式、vue组件设置不同样式

以自定义组件输入框为例

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

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

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

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

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

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