微信小程序自定义组件
- 自定义组件-组件的创建和引用
- 自定义组件-样式
- 自定义组件-数据,方法,属性
- 自定义组件-数据监听器
- 自定义组件-纯数据字段
- 自定义组件-组件的生命周期
- 自定义组件-插槽
- 自定义组件-父子组件通信
- 自定义组件-behaviors
- 总结
1.自定义组件-组件的创建和引用
组件创建:
1.在小程序项目 根目录 新建 components 文件夹
2.在 components 文件夹中创建文件夹 自定义名
3.右击新建的文件 选择 Component 即创建出 js,json,wxml,wxss 四个文件
组件使用(局部和全局)
- 在 .json 文件中引用组件,组件引用格式:
"usingComponents": { "引用后的名字": "组件路径" }
局部使用:
只在当前页面使用自定义组件,在其他页面中引入不起作用
- 在要使用组件页面的json文件中进行配置
- 在要使用组件页面的wxml文件中引入
全局使用:
可在每个页面中使用自定义组件
- 在全局文件app.json文件中配置
- 在任意小程序中页面的wxml文件中引用都可以使用组件
2.自定义组件-样式
h-arrow 是一个自定义组件, 尝试直接添加class属性
解决方案:
组件的js
引入组件:
组件的 wxml
组件的 wxss
3.自定义组件-数据,方法,属性
1.data数据
在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中,示例如下:
2.methods 方法
在小程序组件中,事件处理函数和自定义方法需要定义到 methods 节点中,示例代码如下:
3.properties 属性
在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据,示例代码如下: