index.vue
<template>
<view>
<btn color="red" background-color="skyblue" @change="change">点击我啊</btn>
</view>
</template>
<script>
// 是@/，不要漏了斜杠/
import btn from '@/components/btn/btn'
export default {
data() {
return {
};
},
components: {
btn
},
methods: {
change(params) {
console.log('index---', params) // index--- red
}
}
}
</script>
<style>
</style>
btn.vue
<template>
<view>
<button type="default" class="btn" :style="{color: color, backgroundColor: backgroundColor}" @click="btnChange">
<slot>按钮啊</slot>
</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props: {
color: {
type: String,
default: '#000'
},
backgroundColor: {
type: String,
default: '#ccc'
}
},
methods: {
btnChange() {
console.log(111)
this.$emit('change', this.color)
}
}
}
</script>
<style>
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
