微信小程序笔记2 自定义组件
1.简单自定义组件
1.1 右击 新建个文件夹
1.2 右击 新建个component ，然后输入用户名 ：laomocomponent
1.3 在需要引入的模块（这里姑且就用index 模块举例） index.json 中usingComponents声明抽象节点
"laommycompoents": "/laommycompoents/laommycompoents"
1.4 在laomocomponent.wxml 里 写入 代码：
<!-- 组件模板 -->
<view class="wrapper">
<view>就是这个位置</view>
<slot></slot>
</view>
1.5 在index.wxml 中 码代码：
<laommycompoents>
<view> 测试688</view>
</laommycompoents>
1.6 到这 就结束了， 看页面index
是这样显示的：
就是这个位置
测试688
所以这个 solt 节点的意义就是： <slot> 节点，用于承载组件引用时提供的子节点。
1.7 了解组件各种功能：
1.7.1 组件可以传值
1.7.2 组件可以 多个 slot ；
1.7.3 组件可以 有单独的样式；
1.7.4 组件样式隔离：自定义组件的样式只受到自定义组件 wxss 的影响
1.7.5 可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。
1.7.6 即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。
统一参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
2Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等
3.组件间通信与事件 ：
基本通信方式有以下几种
3.1 WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据；
3.2 事件：用于子组件向父组件传递数据，可以传递任意数据。
3.3 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
3.4 总结 自定义组件中的通信：
3.4.1 a.wxml 与 a.js index.wxml 与 index.js
3.4.2 在a.wxml 上 写上代码 <button bindtap="lmc">点</button> ;（子组件中绑定触发函数）
3.4.3 在a.js 中 写函数 ：必须写在 methods里
methods: {
onTap: function () {
var myEventDetail = {} // detail对象，主要就是提供数据
var myEventOption = {} // 触发事件的选项 可以不写
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
3.4.4 在 index.wxml 内 的标签上写：设计监听事件
<laommycompoentsbind:laomoevent="laomoeventEventListener">
<view> 测试688</view>
</laommycompoents>
3.4.5 在index.js 中接受并且处理函数
laomoeventEventListener:function(e){
console.log('终于TM的进来了');
console.log(e.detail)
},
4. 指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
参考网址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
5. behaviors 是用于组件间代码共享的特性，组件引用它时，它的属性、数据和方法都会被合并到组件中。
5.1在a文件夹下 新建 lm-behavior.js 文件；
文件内容：
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String
}
},
data: {
myBehaviorData: {}
},
attached: function () { },
methods: {
myBehaviorMethod: function () {
console.log('我真是个大帅哥');
}
}
});
5.2在a.js 中写代码： 引入
var myBehavior = require('my-behavior')
Component({
behaviors: ,
})
5.3 在a.wxml 中直接用：
<button bindtap="myBehaviorMethod"> 点 </button>
5.4 坑爹呢不是，居然是这么坑： wx://form-field 代表一个内置 behavior ， 这里居然跟我讲内置，忽悠鬼啊
6 通常利用： relations来解决嵌套组件两者之间的关系；
参考网址： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html
7 数据监听器：observers就是监听数据改变的
参考网址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
页:
[1]