Vue props传入function时的this指向问题解读

Vue props传入function时的this指向

Parent.vue




Child.vue




踩坑笔记

props传入function时,函数中this自动绑定Vue实例;

在H5的Vue中项目中,console将输出 “this is parent.”;

但在uni-app小程序中使用Vue时,console将输出“this is child”;

我的解决方案

将父组件msg作为参数传给子组件,子组件props接收msg,然后在父组件的parantFunc中,无论this 指向父组件还是子组件,this.msg总能取得正确的值;

为什么不使用v-on监听子组件事件并用$emit触发事件?

  • Vue中不推荐向子组件传递Function的方式,因为Vue有更好的事件父子组件通信机制;
  • 我的原因:项目中的子组件是一个公共组件,原本的代码是使用props+Function的方式,且存在默认值,默认调用函数default默认值;如果改为事件$emit的方式,则涉及修改的地方较多;
  • 因此,在尽量不影响原来的业务代码的原则下,采用上述解决方案解决该问题;

Vue props 传递函数

Props的type是函数

通过 props 传递 函数 看看有啥用。

// 父组件


 

{{countF}}

// 子组件

你可能感兴趣的:(Vue props传入function时的this指向问题解读)