微信小程序组件化开发框架wepy 学习（三）

最新推荐文章于 2024-07-30 17:23:09 发布

weixin_34192816

最新推荐文章于 2024-07-30 17:23:09 发布

阅读量115

点赞数

文章标签： python

原文链接：https://my.oschina.net/10000000000/blog/1833801

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

组件引用、循环渲染、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: {
        // 类型为Object
        type: 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>