开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
快速上手
如何使用
通过npm和下载方式的配置之后,在某个页面可以直接使用组件,无需通过import
引入组件。
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>
关于uni.$u 1.7.9
从1.7.9
开始,uView将$u
对象同时挂载到了uni
对象上,这意味着您可以在外部的js
文件中,通过uni.$u.xxx
的形式去调用uView提供的一些工具方法,而不再像从前一样必须在*.vue
中通过this.$u.xxx
的形式调用。
如何不使用easycom而单独引用某一个组件
某些情况下,您可能不想通过easycom引用组件(虽然我们极力推荐您使用easycom),那么您可以使用import
这个常规的引入方式,如下:
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
import uActionSheet from "uView-ui/components/u-action-sheet/u-action-sheet.vue";
export default {
components: {
uActionSheet
},
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>
关于uView组件的esaycom规则可能和其他组件引入名称冲突的问题
uView的组件引入是通过easycom形式的,写在pages.json中,以u-
开头,这可能和其他UI组件,或者uni-app插件市场的uParse修复版-html富文本加载组件名冲突而报错, 原因是此uParse
的组件引用名为u-parse
,也是u-
开头,即使您在页面中显式地配置了组件引入,但uni-app仍认为easycom配置的规则优先级比页面引入的组件规则高。
以下为uParse
第三方插件的官方写法:
<template>
<u-parse :content="xxx"></u-parse>
</template>
<script>
import uParse from '@/components/gaoyia-parse/parse.vue'
export default {
components: {
uParse
}
}
</script>
可以看到,上方虽然通过import
声明了此组件,最终引用的组件名称为<u-parse>
("u-"开头),但是uni-app仍然忽视了,而认为uView在pages.json
配置的easycom规则的优先级更高,因而去uView的组件库 中查找u-parse
,因为找不到而报错,这是不合理的。
解决办法也很简单,给冲突的插件换一个名字即可,比如上面的uParse
插件,我们在import
和components
声明的时候换一个名字即可,比如这里让其为字母a
开头:
<template>
<a-parse :content="xxx"></a-parse>
</template>
<script>
// 记得同时修改引入的名称,以及components中的名称
import aParse from '@/components/gaoyia-parse/parse.vue'
export default {
components: {
aParse
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论