微信小程序之自定义组件

1st.什么是自定义组件

    在实际开发过程中，经常会有代码复用的情况，即在不同的页面中会经常使用结构类似的代码，这会造成代码的高耦合，还不利于代码的维护，微信小程序为了解决这一情况，支持了更为简洁的组件化编程，称之为自定义组件。

2nd.创建自定义组件

    自定义组件的结构类似于页面，由 json  wxml wxss js 4个文件组成，为了小程序包整体的简洁性，在创建时可在小程序根目录新建一个文件夹components来专门存放自定义组件。

    在components文件夹中再新建一个自定义组件的文件夹，文件夹名即为该自定义组件的组件名。

新建自定义组件

    在新建好的组件包上右键，选择新建component，然后再次输入组件名

选择新建component

    输入后，系统会自动生成json  wxml wxss js 4个文件，到此即为新建自定义组件成功

新建自定义组件成功

3rd.使用自定义组件

    使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{ 

     "usingComponents": { 

                                           "counter":"../../components/counter/counter" 

                                       }

}

    usingComponents中的属性名即为使用自定义组件时的标签名，可自己修改，对应的属性值为创建自定义组件时的目录

引用声明自定义组件

    此时我们便可以使用自定义组件了

//使用示例：

<test></test>

效果图

//自定义组件中的wxml：

<text>这里是自定义组件</text>

4rd.组件模板和样式

    类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。

    组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

//使用示例：

<view  class="wrapper">

        <view>这里是组件的内部节点</view>

        <slot></slot>

</view>

//组件样式模板

/* 组件样式模板 */

.wrapper{

    text-align: center;

    padding: 10rpx;

    background-color: #eee;

}

//引用的组件页面模板

<!-- 引用组件的页面模板 -->

<view>

    <component-tag-name>

        <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->

        <view>这里是插入到组件slot中的内容</view>

    </component-tag-name>

</view>

//效果展示

组件模板和样式效果

5rd.模板数据绑定

    与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。

//引用组件的页面模板

<view>

    <component-tag-nameprop-a="{{dataFieldA}}"prop-b="{{dataFieldB}}"> 

            <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->

        <view>这里是插入到组件slot中的内容</view>

    </component-tag-name>

</view>

在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。

6rd.组件间通信与事件

    在使用组件时，可以通过自定义属性的方法传送数据到自定义组件的自定义属性列表properties对象中。在传送数据之前，应到properties对象中先声明一个自定义属性。

//声明自定义属性方法

properties: {

        name:{

            type:String,

            value:'张三'

        },

        age:{

            type:Number,

            value:18

        }

    },

    properties中，一个属性即为一个自定义属性，属性名是自定义属性的名字，在使用时和官方是属性用法一致，属性值的对象中需要写type属性，属性值是自定义属性传过来的数据的类型，value属性的值是当没有传过来这个自定义属性值时的默认值

//使用自定义属性

<view>

    <!-- 使用自定义属性 -->

  <component-tag-name name="李四" age="25"></component-tag-name>

</view>

//效果

自定义属性效果

    很多时候我们希望不光是使用时给自定义属性传数据，还需要自定义属性把修改的值实时的传给当前使用的页面，这个时候我们就需要使用triggerEvent 方法，指定事件名、detail对象和事件选项：

// 在自定义组件中

<!-- 在自定义组件wxml中 -->

<buttonbindtap="onTap">点击这个按钮将触发“myevent”事件</button>

<!-- 在自定义组件js中 -->

methods: {

        onTap(){

            this.setData({

               name:"王五"

            })

            this.triggerEvent('myevent', this.data.name)

        }

    }

    这样设置完成之后，即可在页面中使用myevent方法获取到传过来的数据。

// 在页面中

<!-- 在页面wxml中 -->

<view>

    <!-- 使用自定义属性 -->

  <component-tag-name name="{{myname}}" age="25" bind:myevent="syncData"></component-tag-name>

  {{myname}}

</view>

//在页面js中添加syncData方法

<!-- 在页面js中 -->

syncData(e){

        let {detail} = e

        this.setData({

            myname:detail

        })

    }

//效果展示：

点击按钮前

点击按钮后

附录：

微信小程序自定义组件说明官网：

自定义组件 | 微信开放文档 (qq.com)

链接：https://www.jianshu.com/p/5142fea3ba3a