微信小程序框架wepy.js父子组件双向通信

props

father.wpy

<style lang="less">
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }
</style>
<template>
  <view class="container">

    //.sync表示子组件里更改了twoWayTitle, 父组件里的mynum也会跟着改变 , 双向通信
    <child title="parentTitle999" :addProductImg="addProductImg" :twoWayTitle.sync='mynum' :items="item"></child>

    <view>{{ mynum }}</view>

  </view>
</template>

<script>
  import wepy from 'wepy'
  import child from '../components/child'

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'test'
    }
    components = {
      child:child
    }

    mixins = [testMixin]

    data = {
      item:{
        name:'tom',
        addr:'usa',
        age:22
      },
      mynum: 20,
      addProductImg:[
        '../assets/product/aceeno.png',
        '../assets/product/boots.png',
        '../assets/product/boots2.png',
        '../assets/product/luca.png'
      ]
    }

    computed = {

    }

    methods = {

    }

    events = {

    }

    onLoad() {

    }
  }
</script>

• child.wpy

<style type="less">
  .group {

  }
</style>
<template> 
  <view class="group">
    <view>props</view>
    <view>{{ title }}</view>
    <view>{{ twoWayTitle }}</view>
    <button @tap.stop="getProps">child-getProps</button>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class child extends wepy.component {
    props = {
        title: String,
        syncTitle: {
            type: String,  //限制类型为字符 
            default: 'null'   //默认值为null
        },
        twoWayTitle: {
            type: Number,   //限制类型为数字
            default: 50,   //默认值为50
            twoWay: true   //true表示在子组件里更改了twoWayTitle值, 父组件也会同步更改
        },
        addProductImg:{
          type:Object,  //必须要指定类型
          default:null
        }
    };

    components = {

    }
    methods = {
      getProps(){
        var num = this.twoWayTitle  //获取props值
        this.twoWayTitle = ++num  
      }
    }
  }
</script>