微信小程序||父组件向子组件传递数据和样式

父组件向子组件传递有以下两种

数据通信

样式传递

---------------------

数据通信

建立如下文件路径

页面传递给组件数据，通过在页面中设置属性值把数据传递到组件，组件通过properties获取数据

//index.json中 注册一下组件
{
  "usingComponents": {
    "my-conp3":"/components/my-conp3/my-conp3"
  }
}
//index.wxml⻚面
<my-conp3 dataA="{{title}}"></my-conp3>
//组件my-conp3.js
properties: {
	dataA:{
		type:String,
		value:'默认标题'
//若index.wxml页面为<my-conp3></my-conp3>，则走默认路径 运行显示‘默认标题’
	}
},
//组件index.js  定义一下
 data: {
        title:'biaoti'
 },
//组件页面引用数据my-conp3.wxml
<view class="title">{{dataA}}</view>

运行效果：

//index.wxml⻚面运行结果 页面显示:biaoti
<my-conp3 dataA="{{title}}"></my-conp3>

//若index.wxml页面为<my-conp3></my-conp3>，则走默认路径 运行显示：默认标题

 

样式传递

页面传递外部样式给组件，通过设置属性值传递到组件，组件通过externalClasses引入外部样式

//index.wxml页面
<my-conp3 dataA="{{title}}" my-class="red"> </my-conp3>
//因为要将样式从页面传递到组件中，所以样式要写在index.wxss里面
.red {
  color: red;
}
//组件my-conp3.js
externalClasses:['my-class'],
//组件页面引入对应class样式my-conp3.wxml
<view class="title my-class">{{dataA}}</view>

运行效果：