前言

组件引用、循环渲染、computed计算属性、watch监听 官方文档说的很清楚。基本照着看看就能理解，本篇重点说父组件子组件相互传值交互的问题。这里我感觉还是有点绕的。

Props传值

• 静态传值
  • 静态传值为父组件向子组件传递常量数据，因此只能传递String字符串类型。具体方法为在父组件引用的 需要传值的组件标签中 这种传值是静态的一次性的 伪代码如下：

<!--父组件template 中向引用的子组件child传递propData参数-->
<template><child propData="传递的值"></child>
</template>
<!--子组件如下方式接收-->
export default class mo extends wepy.component {props = {// 静态传值必须对参数进行String 类型声明 后面必须是String 而且只能传递字符串propData: String};onLoad() {// 打印出来为 “传递的值”  也就是说propData传递到了组件的data={propData:'传递的值',...}// 因此子组件的视图层 可以通过 插值标签{{propData}} 进行渲染console.log(this.propData)};
}

总结：静态传值 只能父到子 只能是字符串 在父组件引用的子组件中 参数名='参数值' 子组件中props={参数名:String}值会被放到data 中 通过 {{参数名}}或者 this.参数名可以引用该值

• 动态传值
  • 动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据同步绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据同步绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

规则

• 在父组件data={}中声明参数 eg. data={ 参数名:'dynamicVal'} 父组件引用的子组件中 <syncChild :传递名='参数名'/> 如果传递名后跟.sync 表示父组件的传值实时同步到子组件中去。
• 在子组件的props={} 声明 props={传递名：{type: default: twoWay:}} 其中type 必选 其他非必选。 default 代表默认值 twoWay 表示实现的效果跟 父组件中的.sync正好相反，默认值为false。如果 传递名在父组件中有 .sync后缀同时在子组件props中twoWay为true 则实现双向数据绑定效果

伪代码如下

• 父组件

<template><view>这是一个数据动态绑定测试父组件</view><view>测试简单动态绑定</view><!-- 键 childParam 需要在子组件props中声明  值childParamVal 需要在父组件data={} 中显式声明      this.childParamVal 自己可以尝试 会未定义--><child :childParam="childParamVal"></child><!--父组件 值同步到子组件  添加 .sync  即 子组件的syncText 随着 父组件改变而单向改变--><view>测试父到子单向绑定</view><view> 输入单向绑定数据：<input type="text" value="{{syncText}}" @input="inputChange"/></view><syncChild :syncText.sync="syncText" :twoWayText="twoWayText"></syncChild><view>父组件的twoWayText 以子组件为准：{{twoWayText}}</view>
</template><script>import wepy from 'wepy'import Child from '@/components/child'import SyncChild from '@/components/syncChild'export default class BindData extends wepy.page {props = {}components = {child: Child, syncChild: SyncChild}configs = {}methods = {// 输入框事件 将输入值值赋给动态传值参数inputChange(e) {this.syncText = e.detail.value}}onLoad() {this.childParamVal = [{id: 0,name: 'Alon',alive: false}, {id: 1,name: 'Kart',alive: true}, {id: 2,name: 'Peter',alive: false}]console.log(this.childParamVal)}data = {// 父到子实时单向动态传值声明syncText: '',// 子到父实时单向动态传值声明twoWayText: '',childParamVal: [{id: 0,name: 'jack',alive: false}, {id: 1,name: 'tom',alive: true}, {id: 2,name: 'Sam',alive: false}]}// 监听值变化  子组件 twoWayText 对父组件的影响watch = {twoWayText(newVal, oldVal) {console.log(`新值：${newVal} -->  旧值：${oldVal}`)}}}
</script><style></style>

• 静态传值子组件

<template><view>子组件接收childParam值<block wx:for="{{childParam}}" wx:for-index="index" wx:for-item="item" wx:key="key"><view><text>{{index}}. 姓名：{{item.name}} 是否存在：{{item.alive}}</text></view></block></view><view></view><view></view><view></view>
</template><script>import wepy from 'wepy'export default class Child extends wepy.component {props = {childParam: {// 类型为Objecttype: Object}}components = {}data = {}configs = {}methods = {}onLoad() {console.log(this.childParam)}}
</script><style></style>

• 动态传值子组件

<template><view>测试 父到子单向同步绑定</view><view>子组件输出单向绑定数据：<text>{{syncText}}</text></view><!--子组件 单项绑定数据到父组件--><view>子组件单项绑定数据到父组件<text>{{twoWayText}}</text></view>
</template><script>import wepy from 'wepy'export default class SyncChild extends wepy.component {props = {// 单向动态传值声明syncText: String,twoWayText: {type: String,twoWay: true}}components = {}data = {}configs = {}methods = {}onLoad() {this.twoWayText = '子组件赋值'}}
</script><style scoped></style>

总结 prop 传值比原生的好用了不少 而且可以实现双向绑定 但是规则也需要更多操作来理解 其实<repeat></repeat> 也可以实现数据绑定到子组件 但是是静态的 一次性的 子组件props 不需要声明 也没有 .sync twoWay的概念