606 uniapp自定义组件

---

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>