小程序---组件和页面传递数据和样式

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;
			}

显示