1、properties 页面向组件传递数据
组件 .wxml文件
<view class="title">
{{title}}
</view>
组件 .js文件
Component({
properties: {
title:{
type:String,
value:"我是默认的标题",//页面不传数据,就显示默认值
observer:function(newVal,oldVal){//监听属性变化,只有变化才打印
console.log(newVal,oldVal);
}
}
}
})
页面 .wxml文件
<now-sell title="哈哈哈"></now-sell>
<now-sell></now-sell>
显示
哈哈哈
我是默认的标题
2、externalClassses 页面向组件传递样式
组件 .wxml 文件
<view class="wrap titleclass">
子组件
</view>
组件 .js文件
Component({
externalClasses:["titleclass"]
})
组件 .wxss文件
.wrap{
/* color: red; */注意这里如果设置了color属性,页面上的color属性就不生效
}
.titleclass{
color: red;这列设置了color 属性,页面上color属性生效
}
页面 .wxml文件
<now-sell titleclass="pink"></now-sell>
<now-sell titleclass="blue"></now-sell>
页面 .wxss文件
.pink{
color: pink;
}
.blue{
color: blue;
}
显示