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>