wepy父子组件props传值

ゝ一纸荒年。 2022-04-15 02:29 460阅读 0赞

WePY中父子组件之间传值依靠props来实现,props对象中声明了我们需要传递的值。传值有两种方式,包括静态传值和动态传值。
静态传值
父组件向子组件传递常量数据,只能传递String字符串类型。
在父组件template模板部分的组件标签中,使用子组件props对象中所声明的属性名作为其属性名来向子组件传值。

  1. 父:
  2. <child title="mytitle"></child>
  3. 子:
  4. props = {
  5. title: String
  6. };
  7. onLoad () {
  8. console.log(this.title); // mytitle
  9. }

动态传值(一个变另外一个跟着变)
父——>子:父组件使用.sync修饰符
子——>父:设置子组件props的twoWay: true
父<—>子:既使用.sync修饰符,同时子组件props中添加的twoWay: true

  1. // 父:
  2. <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
  3. data = {
  4. parentTitle: 'p-title'
  5. };
  6. // 子:
  7. props = {
  8. // 静态传值
  9. title: String,
  10. // 父向子单向动态传值
  11. syncTitle: {
  12. type: String,
  13. default: 'null'
  14. },
  15. twoWayTitle: {
  16. type: String,
  17. default: 'nothing',
  18. twoWay: true
  19. }
  20. };
  21. onLoad () {
  22. console.log(this.title); // p-title
  23. console.log(this.syncTitle); // p-title
  24. console.log(this.twoWayTitle); // p-title
  25. this.title = 'c-title';
  26. console.log(this.$parent.parentTitle); // p-title.
  27. this.twoWayTitle = 'two-way-title';
  28. this.$apply();
  29. console.log(this.$parent.parentTitle); // two-way-title. --- twoWay为true时,子组件props中的属性值改变时,会同时改变父组件对应的值
  30. this.$parent.parentTitle = 'p-title-changed';
  31. this.$parent.$apply();
  32. console.log(this.title); // 'c-title';
  33. console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值,当在父组件中改变时,会同时改变子组件对应的值。
  34. }

发表评论

表情:
评论列表 (有 0 条评论,460人围观)

还没有评论,来说两句吧...

相关阅读

    相关 wepy父子组件props

    WePY中父子组件之间传值依靠props来实现,props对象中声明了我们需要传递的值。传值有两种方式,包括静态传值和动态传值。 静态传值 父组件向子组件传递常量数据,

    相关 Vue父子组件

    Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通