【零基础学会uniapp系列】7.3 组件的编写规范

项目部002

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 );

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

加QQ群：326576256

7视频教程在线观看：https://www.eyuyan.tv/?mod=play&tvid=322

课件下载： 【从资源网下载】

从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn