自定义组件

index.vue

<template>
    <view>
        {{title}}
        <hr />
        <btn color='blue' @AAA=CC> 自定义</btn>  //使用props 传值
    </view>
</template>
<script>
    import btn from '../../component/btn.vue'
    export default {
        data() {
            return {
                title: 'Hello',
            }
        },
        components: {
            btn
        },
        onLoad() {
            setTimeout(() => {
                this.title = '数据改变'
            }, 1000)
        },
        methods: {
            CC(e) {
                console.log(e)
            }
        }
    }
</script>

btn.vue 组件内

<template>
        <view class="btn-box" v-bind:style="{color:color}" v-on:click="open">
        <slot></slot>
        </view>
</template>
<script>
    export default {
        props:{
            color:{
                type:String,
                dafult:'#000'
            }
        },
        data() {
            return {
            }
        },
        methods:{
            open(){
                console.log(' btn 被点击了')
                this.$emit('AAA',this.color)  //使用$emit 传值
            }
        }
    }
</script>