易语言资源网 - 做最全的易语言资源下载社区
【精易招聘】UniApp开发工程师 精易论坛授权登录

【零基础学会uniapp】第7.3课:组件的编写规范   [复制链接]

    2021-10-26 15:27:46
    uni-app
    易语言资源网
    150 次浏览

7.3 组件的编写规范

封装组件涉及的知识点较多,这里我们举一个最简单的例子,来让大家快速了解组件的内容。

封装组件教程

组件文件的命名规范:

参考7.2的内容,以能够实现easycom为标准,来进行命名。即:

符合components/组件名称/组件名称.vue目录结构

操作步骤:

1、 如果项目中没有components文件夹,则首先创建该文件夹。

2、 在文件夹上面点击右键,选择新建组件

3 、输入文件名,创建目录,选择css方式。即可创建成功

重点介绍:

name -- 组件名

<script>
export default {
name: "extern-inputbox",
...
}
</script>

props -- 组件的属性

<script>
   export default {
   props: {
           //前面标签显示的文本
           label: {
               type: String,
               default: ""
          },
           //尚未输入任何内容时候显示的文本
           placeholder: {
               type: String
          },
      }
  }
</script>

组件的ref引用

<extern-inputbox label="请输入用户名:" placeholder="请输入用户名" @oncheckbox="oncheckbox" ref="mycom1"></extern-inputbox>

this.$refs["mycom1"]

组件的事件

this.$emit( 'oncheckbox', this.checked );

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 5 次下载)

[错误报告]   上一篇:经常复制 文本 图片的 剪辑板来了...     下一篇:易语言获取软件版本信息...