vue------按钮的封装-----动态添加文字、样式

实现原理是利用父子组件传值的方式实现.
父组件:1.引入2.注册3.使用
子组件:1.样式静态2.监听,动态设置父组件发送的文字与样式

一、按钮实现并引入（动态设置文字）

父组件代码

.<template>
  <!-- 步骤三:使用 -->
  <mybutton text="登录" @click="login"></mybutton>
</template>

<script>
//步骤一:引入子组件
import mybutton from "./components/mybutton1";
export default {
  //步骤二:注册
  components: {
    mybutton,
  },
  //   步骤七:处理子组件发送过来的事件
  methods: {
    login() {
      console.log(123); //业务处理
    },
  },
};
</script>

<style>
</style>

子组件代码

.<template>
  <!-- 步骤五:渲染,点击时发送handlerclick事件告诉父组件 -->
  <div class="btn" @click="handlerclick">{{ text }}</div>
</template>
<script>
export default {
  // 步骤四:监听父组件发出的数据
  props: {
    // 对props成员进行配置
    text: {
      type: String, //要求是字符串
      required: true, //强制传值
    },
  },
  // 步骤六:发送事件给父组件,因为子组件不知道使用场景,让父组件处理
  //语法: this.$emit(事件类型, 参数传递默认事件状态);
  methods: {
    handlerclick($event) {
      this.$emit("click", $event);
    },
  },
};
</script>
.<style lang="less" scoped>
// 按钮样式
.btn {
  margin: 0 auto; //水平居中
  height: 40px; //高度
  width: 90%; //宽度
  background-color: red; //背景颜色
  line-height: 40px; //行高
  border-radius: 20px; //处理圆角
  color: #fff; //字体颜色
  text-align: center; //文字水平居中
}
</style>

二、实现过程图

三、效果

四、动态设置样式

子组件设置一个新样式,父组件发送数据,子组件监听到后判断需要哪个样式,如果true就渲染.

父组件代码

.<template>
  <!-- 步骤三:使用 -->
  <mybutton text="登录" @click="login" type="greenbgc"></mybutton>
</template>

<script>
//步骤一:引入子组件
import mybutton from "./components/mybutton1";
export default {
  //步骤二:注册
  components: {
    mybutton,
  },
  //   步骤七:处理子组件发送过来的事件
  methods: {
    login() {
      console.log(123); //业务处理
    },
  },
};
</script>

<style>
</style>

子组件代码

.<template>
  <!-- 步骤五:渲染,点击时发送handlerclick事件告诉父组件 -->
  <div class="btn" @click="handlerclick" :class="(type = 'greenbgc')">
    {{ text }}
    <!-- class这里判断,如果传过来的值为greenbgc就渲染,可以添加多个,但只渲染一个 -->
  </div>
</template>
<script>
export default {
  // 步骤四:监听父组件发出的数据
  props: {
    // 对props成员进行配置
    text: {
      type: String, //要求是字符串
      required: true, //强制传值
    },
    type: {
      type: String,
      default: "greenbgc", //没有传值时默认greenbgc这个样式
    },
  },
  // 步骤六:发送事件给父组件,因为子组件不知道使用场景,让父组件处理
  //语法: this.$emit(事件类型, 参数传递默认事件状态);
  methods: {
    handlerclick($event) {
      this.$emit("click", $event);
    },
  },
};
</script>
.<style lang="less" scoped>
// 按钮样式
.btn {
  margin: 0 auto; //水平居中
  height: 40px; //高度
  width: 90%; //宽度
  background-color: red; //背景颜色
  line-height: 40px; //行高
  border-radius: 20px; //处理圆角
  color: #fff; //字体颜色
  text-align: center; //文字水平居中
}
.greenbgc {
  //准备更换的样式
  background-color: green;
}
</style>

五、样式动态添加过程图

六、效果

七、如果要添加字体图标