标签：uniapp 606 methods 自定义 index default --- color btn

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>

标签：uniapp,606,methods,自定义,index,default,---,color,btn
来源： https://www.cnblogs.com/jianjie/p/14400982.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。