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>
效果及输出:
控制台输出:
按钮组件被点击了
调用按钮组件