likes
comments
collection
share

uni-app坑:Props传递Function,该方法里的this指向子组件而不是父组件

作者站长头像
站长
· 阅读数 41

踩坑uni-app,子组件Props设置Function,父组件把方法传给子组件后,该方法里的this指向子组件而不是父组件。

在开发下拉选项组件时,选项弹出要求有前置条件,本想在子组件Props绑定一个钩子函数,接受一个回调方法,父组件中设置该方法,经过一些前置条件判断,将结果以执行回调方法时通过参数返回到子组件中,正常vue web项目完全没有问题。但时,uniapp貌似将父组件绑定的方法直接给编译到子组件了,故该方法this指向子组件。

// 子组件
export default {
    props: {
          beforeShow: Function,
    },

    methods: {
          handleSelect() {
            if(this.beforeShow){
                this.beforeShow(v=>{
                    this.show = v;
                })
            }
              this.show = true;
        }
      },
}

// 父组件
export default {
    methods: {
          beforeShow(fn) {
            fn(!this.type); // 这里的this 在uni-app中指向子组件
        }
      },
}

虽然说小程序支持对象中的方法,但看评论,好像并不支持。

uni-app坑:Props传递Function,该方法里的this指向子组件而不是父组件

而且嘴还很硬,啊,对对对....

uni-app坑:Props传递Function,该方法里的this指向子组件而不是父组件

问题链接,https://ask.dcloud.net.cn/que...

如果含有fn,不要用props传参,有的端支持,有的却不支持,除非改设计模式。

所以不要传递Fn了,换种方式实现吧。通过$refs获取子组件,调用子组件中的方法,来实现一些功能。