JS自定义组件开发流程 原创 精华

效果演示

介绍

这里所有讲解均以一个banner自定义组件为例，主要介绍如何编写自定义组件并引用，以及如何去暴露组件的事件、属性，让组件使用起来方便、快捷。这里不再介绍如何搭建项目框架，我们从具体组件编写开始。
需要注意的是，本编文章主要是在讲如何如何创建自定义组件，以及自定义组件与父组件之间的通信、方法暴露、事件暴露等等，组件实现方式某些地方并不合理，最好不要直接使用，即使使用也需要修改。

组件的建立

首先，我们考虑将组件放在哪个文件夹。利用ide新建完项目后，entry/src/main/js/default下面为我们编写项目js代码的地方，一般情况下我们把组件放在common文件夹下，由于一个项目会有多个自定义组件，所以我们一般会在common下建立一个component文件，下面放各种类型的自定义组件，具体文件路径如下图：

组件下面的css、hml、js文件，我们可以把pages/index下面的三个文件拷贝过去；也可以在pages文件夹右击-新建JS Page-输入组件名称-点击Finish后新建一个页面，将整个页面文件夹拷贝到common/component文件夹下，再删除新建的页面即可。

组件的使用

在页面hml文件中使用element标签引用,其name属性设置的值，可以在页面绘制当中当标签名称使用，具体代码如下：

<element src="../../common/component/banner/index.hml" name="banner" ></element>
<element src="../../common/component/circle/index.hml" name="circle" ></element>
<div class="container">
    <banner></banner>
    <circle></circle>
</div>

父组件给子组件传值

1、父组件中需要给组件加入属性并从传入属性值，例如：pages/index/index.hml中”image-list=“{{imageList}}”“

<banner id="banner" image-list="{{imageList}}" duration="1000" change="{{change}}" @get-pic-index="getPicIndex"></banner>

2、子组件中接收参数，common/component/banner/index.js中，属性值可以当data的值一样使用但是不可以在子组件中修改其值，js中使用采用”this.属性名“，hml中使用采用”{{ 属性名 }}“。

props:{
        imageList:{default:[]},
        duration:{default:500},
        change:{default:0}
    }

        这里需要注意下属性名称，如果全部小写，父子组件使用时均使用相同的单词即可；如果中间有大写字母，父组件使用时需要将大写字母变成小写字母，并且中间用”-“隔开。例如，属性”imageList“，父组件传值时使用”image-list“。

3、子组件中可以监控父组件传进来的属性数据改变使用方式是”this.$watch(“change”,“getChangeValue”)“,这样每次change属性有改变均会调用getChangeValue方法。

onInit() {
        this.$watch("change","getChangeValue")
    }
getChangeValue(newValue,oldValue){
        console.log(`接收到的参数***new=${newValue}***old=${oldValue}`)
    }

每次属性改变，运行的log如下：
     app Log: 接收到的参数***new=2***old=1
     app Log: 接收到的参数***new=3***old=2
     app Log: 接收到的参数***new=4***old=3
     app Log: 接收到的参数***new=5***old=4
     app Log: 接收到的参数***new=6***old=5

父组件调用子组件方法

1、子组件存在的方法，如banner组件中swipeTo方法，让轮播跳转到指定位置图片：

swipeTo(index){
        this.$element("swiper").swipeTo({ index: index });
    }

2、父组件中调用，使用”this.$child(“banner”)“取到子组件并调用其存在的方法：

this.$child("banner").swipeTo(0);

子组件调用父组件方法

1、子组件中注册事件方法，同时根据事件名称调用父组件的方法。具体实现，我们采用”this.$emit“，第一个参数事件名称，第二个参数为子组件传给父组件的值。

getPicIndex(e){
        this.$emit("getPicIndex",{index:e.index})
    }

2、父组件中实现子组件注册的方法。
1） htm将事件方法传入到子组件，使用组件时传入”@get-pic-index=“getPicIndex”“。

<banner id="banner" image-list="{{imageList}}" duration="1000" change="{{change}}" @get-pic-index="getPicIndex"></banner>

2） js实现传入的getPicIndex方法。

getPicIndex(e){
        this.index = e.detail.index;
    }

这里需要注意下事件方法名称，如果全部小写，父子组件使用时均使用相同的单词即可；如果中间有大写字母，父组件使用时需要将大写字母变成小写字母，并且中间用”-“隔开。例如，事件方法”getPicIndex“，父组件传值时使用”get-pic-index“。

子组件给父组件传值

这个传值，其他可以依赖于子组件调用父组件方法实现。因为注册事件方法时，第二个参数即为传入的值。
1、子组件传入值”{index:e.index}“

getPicIndex(e){
        this.$emit("getPicIndex",{index:e.index})
    }

2、父组件取出使用”e.detail.index“，其中”detail“是固定的，”index“为你传入的json串对象名称。

getPicIndex(e){
        this.index = e.detail.index;
    }

3、另外说明下，使用”this.$child(“banner”)“取到子组件后可以获取到其对应data里面对象的值

prompt.showToast({
            message:"获得子组件的值为："+this.$child("banner").change,
            duration:3000
        })

兄弟组件之间传值

这里将banner组件获取的值，通过父组件作为中转传给了circle组件。除此之外，我们可以采用全局变量、文件存储等实现兄弟组件之间传值。
1、父组件获取到banner组件的值，将其存在变量index中。

getPicIndex(e){
        this.index = e.detail.index;
    }

2、将其通过属性方式传给了circle组件。

<circle style="margin-top: 20px;" index="{{index}}"></circle>

代码参考

https://gitee.com/jsntcqy/MyJsComponent