uni-app 组件的使用

组件的使用步骤
1. 定义组件
2. 引入组件
3. 注册组件
4. 使用组件

定义组件
1. src目录下新建文件夹 components，用来存放组件
2. components目录下直接新建组件 *.vue

引入组件
- 在页面中引入组件 "import 组件名 from '组件路径'"

注册组件
- 页面的实例中新增属性components
- 属性components是一个对象，将组件放进去注册

使用组件
- 页面的标签中直接使用引入的组件 "<组件> </组件>"

src\components
 |_ img-border.vue (第一步：定义组件 img-border.vue)

<template>
  <img class="img-border" src="xx.png"/>
</template>

<script>
  export default {
    
  }
</script>

<style>
  .img-border {
    border-radius: 50%;
  }
</style>

index.vue 引入组件img-border.vue

<template>
  <view class="content">
    # 第四步：使用组件
    <imgBorder/> //uni-app不推荐驼峰写法
    
    <img-border/> //uni-app 推荐写法。问题：为何还要定义imgBorder？
  </view>
</template>

<script>
  # 第二步：引入自定义组件 (@等同于src目录)
  import imgBorder from "@/components/img-border"; (imgBorder不能是img-border，编译器会将'-'视为减号)
  export default {
    # 第三步：注册组件
    components: {
      imgBorder: imgBorder // 属性名：属性值 （写法1）
      
      imgBorder // 属性名与属性值相同时，属性值可省略 （写法2）
    }
  }
</script>