创建自定义组件:类似于页面,一个自定义组件由json、wxml、wxss、js 4个文件编写。
要编写一个自定义组件,首先需要在自定义组件的json文件里设置
{
“component”:true
}
在自定义组件的wxml里面进行自定义组件wxml的编写
<!--<slot></slot>为页面中,在自定义组件标签内编写的内容 -->
<view class="first-test">
<view>
这是组件slot中的内容
</view>
<slot></slot>
<view>slot的下面的内容</view>
</view>
在自定义组件的js/ts中进行页面给组件的传值的接收(父子传值)
export default Component({
//properties接收参数
properties:{
//data--->父组件传值时里面定义的data
data:{
type:Object, //父组件传来的类型
//observe实现监听的效果
observer:function(newVal){
console.log("newVal",newVal)
if(newVal){
//在这里就可以给data里的数据赋值了
this.setData({})
}
}
}
}
//数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 setData 最多触发每个监听器一次。
//使用通配符**可以监听全部setData。
observers:{
'**':function(){
//每次setData都能触发
}
页面中
在页面的json文件中引入自定义组件
/*
"my-component"-->自定义组件名
"/src/pages/components/firsy-test":路径
*/
{
"usingComponents":{
"my-component":"/src/pages/components/firsy-test"
}
}
在页面的wxml文件中使用自定义标签名进行自定义组件的使用
<!-- formaData:父组件传给子组件的数据 (父组件的js定义的数据)
data:子组件来接收父组件数据的变量名
-->
<view class="custom-page">
CustomComponents
<view>
<view>这是组件内部的节点</view>
<my-compoent data="{{formaData}}">
<view>组件内slot所对应的值</view>
</my-compoent>
</view>
</view>
页面中的js/ts定义的数据
data:{
formData:{
}
}