小程序自定义组件以及组件传值的简单总结

1、自定义组件

1. 在根目录下创建components文件夹
2. 建议为每个组件都创建一个文件夹，便于区分。例：在components文件在下创建test文件夹
3. 点击test文件夹，点击鼠标右键，选中 新建Components，创建组件test，会自动生成组件对应的 4 个文件，后缀名分别为 .js ， .json ， .wxml 和 .wxss。类似于也模板，在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式。注意：在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。
4. 首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{
  "component": true
}
1
2
3

2、使用自定义组件

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

{
    "usingComponents": {
        "test":"/components/test/test"
    },
}
1
2
3
4
5

2. 在页面中使用

<test> </test>
1

3、组件传值—>父传子

1. 父组件，在使用子组件中的地方传递值

data:{
	dataMsg:{
		name:'张三',
		sex:'李四'
}

//title直接传递的是写死的字符串，dataMsg是传递的是动态中的数据，是父组件.js文件中的data中的dataMsg
<test title="测试" msg="{{dataMsg}}"> </test>
1
2
3
4
5
6
7
8

2. 子组件.js接收传递的值

Component({
    properties: {
        msg: {
            type: Object
        },
        title: {
            type: String
        }
    },
    data: {
       
    },
    /**
     * 页面的初始数据
     */
    methods: {
     }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 子组件使用传递的值

<text>{{title}} {{msg.name}}</text>
1

4、组件传值—>子传父

1. 父组件

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<test bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<test bind:myevent="onMyEvent" />


Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的 detail 对象（接收子组件传递过来的值）
  }
})
1
2
3
4
5
6
7
8
9
10
11

2. 子组件

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>


Component({
  properties: {},
  methods: {
    onTap: function(e){
    //可以consolo.log(e)查看触发onTap事件时传递的值
      var myEventDetail = {} // detail对象，提供给事件监听函数(需要传递给父组件的值)
      var myEventOption = {
				bubbles: false,//事件是否冒泡,默认false
                composed: false,//事件是否可以穿越组件边界，为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部,默认false
                capturePhase: false,//事件是否拥有捕获阶段,默认false
			} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：在使用自定义组件+递归的方式实现多级菜单，需要在组件的.json文件中自己引入这个组件（标题2中的步骤1），自己使用自己，不需要再像页面中那样bind:myevent="onMyEvent"（个人理解为绑定一个事件），可以利用触发事件的选项（冒泡，捕获）
（学习小程序自定义组件也有一段时间了，之前在工作中的项目有用到，现在才来总结。自己在弄递归组件的时候也走了很多弯路，没有及时总结，可能有些地方不太正确，印象没有那么深刻了）

大家也可以自己到微信小程序官方文档上查看学习一下自定义组件链接: 微信小程序自定义组件官方文档