自定义组件
1、创建自定义组件
① 声明自定义组件,json文件:
默认为true,不用声明了
② 编写组件内容,wxml文件:
③ 引入(注册)自定义组件,index.json:
{
"usingComponents": {
"my-component": "../../components/my-component"
}
}
④ 使用自定义组件,index.wxml:
<view class="container">
<my-component />
</view>
2、组件之间的双向绑定(两大类)
小程序的简易双向绑定语法中,主要分为两大类:
①在WXML中,表单元素 与 数据之间的双向绑定
原始写法:
在index.wxml中写一个input框
在index.js中定义绑定的数据
实现二者的双向绑定步骤:
给input绑定数据:
value="{{ inputText }}"
给input设置一个监听事件:
bindinput="handleInput"
bindinput事件是在键盘输入时触发
e.detail.value能够拿到用户输入的值,然后调用setData()更新inputText 数据
最后显示在页面中
WX简单的写法:
直接在value前面添加model: ,其余的事件也去掉,也能实现双向绑定的效果
②自定义组件中的双向绑定
父组件中 向 子组件传递数据
通过指定传递的属性input-text = “inputText”(将传递的数据改写为属性)
注意,传递的属性必须是以小写的形式,驼峰的要添加中划线
子组件通过properties属性接收数据
子组件在页面上使用
这样就完成了父组件向子组件传递数据,也就是在父组件输入数据时,子组件会接收到父组件的不断变化的数据,进行使用展示,实现组件之间的双向数据绑定
子组件修改父组件的值
当点击子组件的按钮时,修改父组件的数据
第一步:在父组件中 给子组件标签加上model:
第二步:给子组件添加点击事件
第三步:在子组件中修改父组件传递进来的数据
结果:
小结:父组件加model传递,子组件接收,并进行使用
3、组件模板和样式(slot插槽)
在自定义的组件模板中,除了可以使用标签来编写组件内容以外,还可以使用slot插槽。
插入单个slot
(父组件向子组件传递页面结构)
① 在使用组件的地方编写插槽的内容
<view class="container">
<my-component>
我就是插槽内容
</my-component>
</view>
② 在my-coment组件内 将内容插入
理解:(自定义组件在别的页面使用的时候,带回来一些页面结构,实现了组件间的通信)
my-component.wxml:
<text>
我创建了一个自定义组件
<slot></slot>
</text>
插入多个slot
① 在自定义组件设置options属性
my-component.js文件:代表开启支持多个slot
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
② 在使用组件的地方编写插槽的内容
通过slot属性指定插槽名称
<view class="container">
<my-component>
<text slot="head">我是插槽头部内容</text>
<text slot="after">我是插槽底部内容</text>
</my-component>
</view>
③在my-coment组件内 将内容插入
通过name属性指定对应的插槽内容
<text>
<slot name="head"></slot>
<slot name="after"></slot>
</text>
运行结果:
4、组件之间的通信方式
1. 通过WXML数据绑定(父向子传递数据)
在自定义组件模板中,通过slot插槽的方式,由父组件向子组件传递WXML数据
还有在父组件中,通过为子组件指定属性,子组件通过properity的方式来传递(自定义组件的双向绑定)
2. 通过事件的方式(子向父传递数据)
父组件向子组件传递一个事件,在子组件中触发
当子组件触发事件并传递数据时,父组件接收子组件的数据,从而父组件的数据发生变化,来完成子与父的通信
①步:父组件定义一个事件handleCallback,同时定义事件名称change
②步:子组件定义一个事件handleClick,用于触发事件并传递数据
第一个参数是触发的事件名称,第二个参数是要传递的数据
父组件接收数据;通过参数接收,这只是接收到了数据而已
3. 如果上述两种方式都不能满足组件之间的通信
通过获取子组件实例,来实现父子之间的通信
和vue类似,通过ref来拿到子组件实例,然后去触发子组件对应的一些方法
比如说有时需要在子组件的某一个状态发生变化的时候,能够在父组件中去触发指定的子组件的方法。这种情况下,需要在父组件去拿到子组件的实例,通过 this.selectComponent方法获取子组件实例,然后去调用子组件所对应的方法
①给子组件添加class
② 在父组件调用,并可以调用子组件的方法
这就是在父组件中 去 调用子组件的方法,来实现的功能
5、数据监听器
Component({
data: {
numA: 1,
numB: 2
},
lifetimes: {
ready() {
// 修改数据
this.setData({
numA: 5,
numB: 6
})
console.log('触发');
}
},
//监听
observers: {
// 监听到变化之后,使用变化之后的值
"numA, numB": function(numA, numB) {
this.setData({
sum: numB + numA
})
}
}
})
通过.语法,监听某个特定属性的变化
注意:小程序中修改原数据的时候,不能直接修改,需要先进行深拷贝引用数据再修改。
报错处理:
这是缓存问题,清除缓存即可,全部清除