【uni-app填坑】 自定义组件的创建及使用

组件的创建

在components目录下新增my-component.vue，如下：

<template>
   <view>
    <text>{{title}}</text>
  </view>
</template>

<script>
export default {
  name: "my-component",
  // 属性
  props: {
    title: {
      type: String, // 属性类型
      default: "你好" // 默认值
    }
    ......
  }
}
</script>
<style lang="scss">
// 组件样式
</style>

在.vue中使用组件

// 使用
<template>
  <my-component :title="title"></my-component>
</template>
// 引入组件
import MyComponent from '@/components/my-component.vue'
export default {
  data(){
    return {
      title: 'Hello World'
    }
  },
  // 注册组件
  components:{
    MyComponent
  }
}

小伙伴是否以为到这一步就算完成了vue自定义组件的创建和使用呢？

其实，如果是在小程序或者H5中进行使用，算是完成了。但是如果是在app中使用，你会发现组件居然没有显示出来而且也没有报其他的错误，这到底是为什么呢？

目前，我是使用HBuilderX的2.0.1版进行开发的，上面描述的问题，经过多次测试，解决办法是：每次引用了新组件，把编译器关闭后再重启，这样就可以正常展示组件了。所以猜想这是由于编译器在热更新时，新增组件没有被重新编译所导致的。

虽然这个问题是解决了，但又出现了新问题。就是每次新建或引用组件，都需要重启编译器，非常麻烦和耗时。所以我自己目前采用的方法是先在小程序开发工具或浏览器中进行开发测试，等功能差不多完成后再进行真机测试和平台差异化代码的编写。

希望文章对你有所帮助！