第一章 组件
step 1
主页面上定义一个子组件然后使用：
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
step 2
配置要使用的子组件 json
{
"usingComponents": {
"xsy": "../compontend/text/txt" 只作示例
}
}
并配置子组件是子组件形式：这步通常是默认生成
{
"component": true,
"usingComponents": {}
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
step 3
在子组件绑定事件，事件中发送事件
xml文件、、、、、、、、、、、、、、、、、、、、、、、、、
js文件、、、、、、、、、、、、、、、、、、、、、、、、、、
// pages/compontend/测试组件/txt.js
Component({
methods: {
hend(){
console.log("ok");
this.triggerEvent("increment",{},{}); //发送事件
}
}
})
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
step 4
使用的主要主件js 文件编写监听函数并设置数据：
// pages/xsytext/xsytext.js
Page({
data:{
counter:10
},
fn(){
this.setData({
counter: this.data.counter+=2,
})
},
})
总结：整理流程，，子组件绑定一个事件，事件中发送事件，，使用的组件页面上临监听事件，并绑定处理函数 并通过setdata({})函数处理数据
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
实战一
我们实战做一个tab-control组件 类似于底部tab菜单选择的组件
步骤一 新建一个组件，并在使用的组件的地方注册好，
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
view class="tab-control">
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
css样式部分
/components/
.tab-control{
display: flex;
height: 88rpx;
line-height: 88rpx;
background: orange;
}
.tab-item{
flex: 1;
text-align: center;
}
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
步骤二
为了让数据不要写死，需要使用在传递 在子组件的js文件中，定义好传入数据类型
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
properties: {
titles:{
type: Array,
value: []
}
},
||||||||||||||||||||||||||||||||||||||||||||||||
然后得修改父组件使用方式：不应写死，应写成传入
写子组件的数据也改为遍历
|||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
功能点二
点击变色 第一步先是用三目运算符生成一个根据索引生成class ，然后点击谁，就把data的cur属性变成几，比如cur是2时== index为2的会变红色
——————————————————————————————————————————————————————————————————————————————————————
data: {
cuttentIndex: 0
},
——————————————————————————————————————————————————————————————————————————————————
在子组件中利用三目运算设置calss
————————————————————————————————————————————————————————————————————————————
<view class='tab-item {{cuttentIndex == index ? "active" : ""}}'
bindtap="fn"
data-index = "{{index}}"
{{item}}
备注 data-index 中自定义属性一定要data开头，才会被事件获取
————————————————————————————————————————————————————————————————————————————————
编写点击逻辑
methods: {
fn(enevt){
const index = enevt.currentTarget.dataset.index;
this.setData({
cuttentIndex: index
})
}
}
})
——————————————————————————————————————————————————————————————————————————————
优化
目的是点击的时候下面显示一条线 就是增加点击元素的额外样式
——————————————————————————————————————————————————————————————————————————————————————————————
/components/
.tab-control{
display: flex;
height: 88rpx;
line-height: 88rpx;
background: orange;
}
.tab-item{
flex: 1;
text-align: center;
}
.active text{
color: red;
border: 1px solid rebeccapurple; 主要是这行
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
父组件修改子组件方法，这个方法是写在父组件中的
onclick(e){
console.log("click")
const eventcpn = this.selectcomponent(#cpn)
enentcpn.increment()
}
组件内监听 这个方法是写在子组件中的，然后父组件可以调用
increment(){
this.setData({
counter: ++ this.data.counter
})
}
2020-2-1（前二天工作太累，没有来补充笔记，今天重新整理）
今天总结组件获取对象方式,先复习一下上面的内容
父组件向子组件传递数据用properties 示例代码：
observer:function(newVal,oldval){
//新旧值
}
}
}
组件向子组件传class 方式
externalClasses['titleclass']
子组件向外发送事件
this,triggerEvent("increment",{name:'why'},{})
父组件监听事件
——————————————————————————————————————————————————————————————————————————————————————————————————————
slot的使用
slot 目的是解决在组件内插入组件，使用方法先在定义一个子组件 my-slot
xml 部份内容如下：
使用时候就可以