dafa888官网dafa888官网


大发bet客户端下载

【WePY小程序框架实战三】-组件传值

【WePY小程序框架实战一】-创建项目

【WePY小程序框架实战二】-页面结构

父子组件传值

静态传值

静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型。

父组件 (parent.wpy)

<view> <child name="leinov"></child></view>

子组件(child.wpy)

<template lang="wxml"> <view> {{name}} </view></template><script> props={ name:String } onLoad(){ console.log(this.name);//leinov } </script>

动态传值

sync修饰符来达到父组件数据绑定至子组件的效果也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果如果既使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定了。

异步数据父子组件传值注意

parent

<script> export default class Parents extends wepy.page { data = { tabdata:{}, //下面要用这里必须要写上 } async onLoad() { let data = await getData(,"public/data",{session_key:"1234456"}); this.tabdata= data.tab; this.$apply();//必须 } }</script><template lang="wxml"> <view slot="title"></view> <view slot="content"> <Tab :tab.sync="tabdata" ></Tab> </view></template>

child

<template lang="wxml"> <view slot="title">{{tab}}</view></template>

export default class Tab extends wepy.component { props = { tab:{ type:Object, default:null, twoWay:true }}

以下必须注意

模版中要给子组件传的值 在data里要声明好取到异步值后要使用this.$apply()手动更新组件在父组件中调用子组件的属性名要加.sync子组件要使用父组件的props必须在props里声明

欢迎阅读本文章: 许爱国

dafa888如何下载

大发bet客户端下载