写在前面的话

上一篇我们讲到了项目的上手，这一讲我们围绕着wepy（vue）的一些特性方法来进行讲解

上一篇我们提到了一些遗留问题：

现在我们开始填写第一个坑父子组件之间传递数值

props 传值

props传值在WePY中属于父子组件之间传值的一种机制，包括静态传值与动态传值。

在props对象中声明需要传递的值，静态传值与动态传值的声明略有不同，具体可参看下面的示例代码。

静态传值

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

在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名作为其属性名来接收父组件传递的值。

<child title="mytitle"></child>// child.wpy
props = {title: String
};onLoad () {console.log(this.title); // mytitle
}

动态传值

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

注意：下文示例中的twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。这是与Vue不一致的地方，而这里之所以仍然使用twoWay，只是为了尽可能保持与Vue在标识符命名上的一致性。

在父组件template模板部分所插入的子组件标签中，使用:prop属性（等价于Vue中的v-bind:prop属性）来进行动态传值。

// parent.wpy<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>data = {parentTitle: 'p-title'
};// child.wpyprops = {// 静态传值title: String,// 父向子单向动态传值syncTitle: {type: String,default: 'null'},twoWayTitle: {type: String,default: 'nothing',twoWay: true}
};onLoad () {console.log(this.title); // p-titleconsole.log(this.syncTitle); // p-titleconsole.log(this.twoWayTitle); // p-titlethis.title = 'c-title';console.log(this.$parent.parentTitle); // p-title.this.twoWayTitle = 'two-way-title';this.$apply();console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值this.$parent.parentTitle = 'p-title-changed';this.$parent.$apply();console.log(this.title); // 'c-title';console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

上面提到的props方法跟vue同样适用

有兴趣的小伙伴可以自行研究

结束语

喜欢加个关注支持一下后续会有更多更新内容，我好困啊我要睡觉了

项目地址

https://github.com/crobotvip/smallshop.git

小程序第三讲组件间传值 props相关推荐

【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template><div><div>{{message}}(子组件)</div></div> ...
小程序-实现自定义组件以及自定义组件间的通信
前言对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setDat ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现父组件: <template><view cla ...
微信小程序（自定义组件）
文章目录自定义组件创建自定义组件引用组件组件和页面的区别自定义组件的样式样式隔离修改样式隔离选项组件的data和methods 组件的properties 数据监听使用纯数据字段提升 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...

小程序第三讲组件间传值 props

小程序第三讲组件间传值 props

写在前面的话

props 传值

上面提到的props方法跟vue同样适用

结束语

项目地址

小程序第三讲组件间传值 props相关推荐

最新文章

热门文章

小程序第三讲 组件间传值 props

小程序第三讲 组件间传值 props

写在前面的话

props 传值

上面提到的props方法跟vue同样适用

结束语

项目地址

小程序第三讲 组件间传值 props相关推荐

最新文章

热门文章

小程序第三讲组件间传值 props

小程序第三讲组件间传值 props

小程序第三讲组件间传值 props相关推荐