Vue简单组件封装之按钮组件

Vue简单组件封装之按钮组件

实现效果：传递不同的属性值，按钮名称和按钮颜色不一样

封装组件代码：

<template>
<input type="button" :class='type' :value='name' @click="defaultClick"/>
</template>

<script>
export default {
  name: "CoolButton",
  methods: {
    defaultClick () {
      console.log("按钮组件被点击了")
      this.$emit('btn-click')
    }
  },
  computed: {},
  props: {//调用该组件时需要传递过来的属性
    name:{
      type:String
    },
    type:{
      type:String
    }
  }
}
</script>

<style scoped>
/*按钮样式*/
input{
  border: none;
  padding: 2px 10px;
  border-radius: 6px;
  margin: 2px 6px;
  color:#fff
}
/*不同属性按钮颜色不同*/
.primary{background-color: #409eff}
.danger{background-color: #f56c6c}
.success{background-color: #67c23a}
.warning{background-color: #e6a23c}
</style>

调用组件代码：

/*在html里使用组件*/
//<cool-button type="primary" name="名字" @btn-click="a"></cool-button>
//<cool-button :type="typeParent" :name="nameParent" @btn-click="a"></cool-button>
<cool-button :type="'primary'" :name="'名字'" @btn-click="a"></cool-button>

//引入组件
import CoolButton from '@/views/Conformance/components/coolButton/cool-button.vue'
export default {
  name: "otherList",
  data() {
    return {
    typeParent:'primary',
    nameParent:'名字'
    },
  },
  components: {
   'cool-button':CoolButton,
  },
  computed: {},
  methods: {
   a(){
      console.log('调用按钮组件')
    }
};
</script>

效果及输出：

控制台输出：

按钮组件被点击了
调用按钮组件