【UniApp】-uni-app-自定义组件
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231203182130826-1561756591.png" alt="" loading="lazy"></p><h1 id="前言">前言</h1>
<ul>
<li>经过上个章节的介绍，大家可以了解到 uni-app-网络请求的基本使用方法</li>
<li>那本章节来给大家介绍一下 uni-app-自定义组件 的基本使用方法</li>
<li>原本打算是直接写项目的，在写项目之前还有个内容需要我在码一篇文章，所以就先码这篇文章了</li>
<li>本章节的内容比较简单，大家可以快速的过一遍，然后在项目中使用</li>
<li>就是自定义组件，虽然 UniApp 是基于 Vue 的，但是在使用自定义组件的时候，还是有一些需要注意的地方，所以本章节就来给大家介绍一下</li>
</ul>
<h1 id="步入正题">步入正题</h1>
<ul>
<li>首先我们打开官方文档：https://uniapp.dcloud.net.cn/component/#easycom</li>
<li>在 UniApp 的组件当中，有一个 easycom 的组件规范，只要你遵循了这个规范，就可以进行自定义组件</li>
</ul>
<p>那么遵循了这个规范又有什么好处呢？</p>
<ul>
<li>传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步</li>
<li>只要组件安装在项目的 <code>components</code> 目录下或 <code>uni_modules</code> 目录下，并符合 <code>components/组件名称/组件名称.(vue|uvue)</code> 就可以不用引用、注册，直接在页面中使用</li>
</ul>
<blockquote>
<p>目录结构注意：当同时存在 vue 和 uvue 时，uni-app 项目优先使用 vue 文件，而 uni-app x 项目优先使用 uvue 文件</p>
</blockquote>
<p>好了，知道了 UniApp 中有这么一个规范之后，我们来试一下，看是不是就可以如此简单的使用自定义组件了</p>
<ul>
<li>首先我们在项目的 <code>components</code> 目录下创建一个 <code>ITButton</code> 文件夹</li>
<li>然后在 <code>ITButton</code> 文件夹下创建一个 <code>ITButton.vue</code> 文件</li>
</ul>
<p>ITButton.vue</p>
<pre><code class="language-vue"><template>
<view :class="['it-btn', type]">
<slot></slot>
</view>
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'default'
}
},
methods: {
}
}
</script>
<style>
.it-btn {
width: 400rpx;
height: 150rpx;
line-height: 150rpx;
font-size: 40rpx;
text-align: center;
}
.default {
background-color: gray;
}
.warn {
background-color: red;
}
.primary {
background-color: deepskyblue;
}
</style>
</code></pre>
<p>到这，我们自定义组件创建好了，官方介绍，只要我们遵循了这个规范，就可以不用引用、注册，直接在页面中使用，那么我们就来试一下：</p>
<ul>
<li>在 index.vue 中使用</li>
</ul>
<p>index.vue</p>
<pre><code class="language-vue"><template>
<view>
<ITButton type="primary">我是自定义按钮哦</ITButton>
</view>
</template>
</code></pre>
<ul>
<li>然后我们运行一下，看看效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217175943273-1846206138.png" alt="" loading="lazy"></p>
<ul>
<li>很完美哦，我们就不用引用、注册，就可以直接在页面中使用了</li>
<li>可以根据 type 的不同，来设置不同的样式，这样就可以实现一个按钮，多种样式的效果了</li>
<li>我这个组件已经实现了，好了本文就到这里，下一篇文章我们就来写项目了</li>
</ul>
<h1 id="end">End</h1>
<ul>
<li>如果你有任何问题或建议，欢迎在下方留言，我会尽快回复</li>
<li>如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/BNTang/p/17918769.html
頁:
[1]