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

来源:互联网 发布:阿里云动易cms安装教程 编辑:程序博客网 时间:2024/05/30 04:25

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>

这里写图片描述