606 uniapp自定义组件

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>
上一篇:【LeetCode】C++ :简单题 - 树 606. 根据二叉树创建字符串


下一篇:积分表16