# uniapp引入ui组件 目录存在`components`中 在`script`中引用组件 ``` <pre class="calibre13">``` <span class="token2">import</span> uniBadge <span class="token2">from</span> <span class="token4">"@/components/uni-badge.vue"</span> <span class="token2">export</span> <span class="token2">default</span> <span class="token1">{</span> components<span class="token1">:</span> <span class="token1">{</span>uniBadge<span class="token1">}</span> <span class="token1">}</span> ``` ``` 在`template`中使用组件 ``` <pre class="calibre13">``` <span class="token"><</span>uni<span class="token">-</span>badge text<span class="token">=</span><span class="token4">"1"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>uni<span class="token">-</span>badge<span class="token">></span> <span class="token"><</span>uni<span class="token">-</span>badge text<span class="token">=</span><span class="token4">"2"</span> type<span class="token">=</span><span class="token4">"purple"</span> @click<span class="token">=</span><span class="token4">"bindClick"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>uni<span class="token">-</span>badge<span class="token">></span> <span class="token"><</span>uni<span class="token">-</span>badge text<span class="token">=</span><span class="token4">"3"</span> type<span class="token">=</span><span class="token4">"primary"</span> <span class="token1">:</span>inverted<span class="token">=</span><span class="token4">"true"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>uni<span class="token">-</span>badge<span class="token">></span> ``` ``` 图片变成圆形 ``` <pre class="calibre14">``` <span class="token"><</span>image <span class="token1">:</span>src<span class="token">=</span><span class="token4">"getUrl(item.logoimage)"</span> mode<span class="token">=</span><span class="token4">"widthFix"</span> style<span class="token">=</span><span class="token4">"width: 120rpx;height: 120rpx; border-radius: 20rpx;border-radius: 50%;"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>image<span class="token">></span> ``` ```