组件定义
1、创建组件
构造器使用的时Component
配置文件中设置component:true
2、引入组件
首先声明这个组件，在配置文件声明
"usingComponents": { "my-button":"/components/MyButton/MyButton"},
3、设置插槽
4、命名插槽
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 },})// 使用的时候// 父组件 // 子组件中
组件中的样式
类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式
组件模板
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个
这里是组件的内部节点
这里是插入到组件slot中的内容
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
父子组件通信
properties: { // 复杂定义 name:{ type: String, value:'张三丰' }, // 简单定义 name2:String},
父组件在引用子组件的时候通过设置属性的方式给子组件传值
子组件给父组件传值
在组件中绑定一个自定义事件
// 引用了自定义的组件， 绑定了myevent事件，这个事件对应的是parentEvent方法
在子组件中触发这个事件，可以给父组件传值。
methods: { 方法名字: function(){ var myEventDetail = {} // detail对象，提供给事件监听函数 var myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption) } }
组件的生命周期
Behaviors注册一个 behavior，接受一个 Object 类型的参数
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String
}
},
data: {
myBehaviorData: {}
},
attached: function(){},
methods: {
myBehaviorMethod: function(){}
}})
Original: https://blog.csdn.net/weixin_48780364/article/details/128154580
Author: script~
Title: 微信小程序组件化
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/724436/
转载文章受原作者版权保护。转载请注明原作者出处！