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

 更新时间:2023年01月21日 09:03:36   作者:__Simon  
这篇文章主要介绍了Vue props传入function时的this指向问题解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue props传入function时的this指向

Parent.vue

<template>
  <div>
    <Child :func="parentFunc"></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  data () {
    return {
      msg: 'this is parent.'
    }
  },
  components: {
    Child
  },
  methods: {
    parentFunc () {
      console.log(this.msg)
    }
  }
}
</script>

Child.vue

<template>
  <div>
    <button @click="childFunc">click</button>
  </div>
</template>

<script>
export default {
  props: {
    func: {
      require: false,
      type: Function,
      default: () => {
        return () => {
          console.log(this.msg)
        }
      }
    }
  },
  data () {
    return {
      msg: 'this is child.'
    }
  },
  methods: {
    childFunc () {
      this.func()
    }
  }
}
</script>

踩坑笔记

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 传递 函数 看看有啥用。

// 父组件

</template>
 <div>
    <children :add='childrenClick'></children>
    <p>{{countF}}</p>
  </div>
</template>

<script>
import children from './Children'
export default {
  name: 'HelloWorld',
  data() {
    return {
      countF: 0,
    }
  },
  methods: {
    childrenClick(c){
     this.countF += c;
    }
  },
  components:{
    children,
  }
}
</script>

// 子组件
<template>
    <div>
        <button @click="handClick(count)">点击加 1 </button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count:1,
        }
    },
    props:{
        add:{
            type: Function
        }
    },
    methods: {
        handClick(){
            this.add( ++this.count); // 父组件方法
        }
    },
}

结果

可以看到 chirden 组件在中 使用 props.add() , 调用的是 父组件的方法。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue的 v-for 循环中图片加载路径问题

    解决vue的 v-for 循环中图片加载路径问题

    今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    这篇文章主要为大家详细介绍了vue.js评论发布信息可插入QQ表情功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue项目中禁用浏览器缓存配置案例

    vue项目中禁用浏览器缓存配置案例

    这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Element-Plus之el-col与el-row快速布局

    Element-Plus之el-col与el-row快速布局

    el-col是el-row的子元素,下面这篇文章主要给大家介绍了关于Element-Plus之el-col与el-row快速布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue3容器布局和导航路由实现示例

    vue3容器布局和导航路由实现示例

    这篇文章主要为大家介绍了vue3容器布局和导航路由实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue组件模板的几种书写形式(3种)

    Vue组件模板的几种书写形式(3种)

    这篇文章主要介绍了Vue组件模板的几种书写形式(3种),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue-router中的钩子函数和执行顺序说明

    vue-router中的钩子函数和执行顺序说明

    这篇文章主要介绍了vue-router中的钩子函数和执行顺序说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    这篇文章主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue使用fengMap速度慢的原因分析

    vue使用fengMap速度慢的原因分析

    这篇文章主要介绍了vue使用fengMap速度慢的原因分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现微信获取用户信息的方法

    vue实现微信获取用户信息的方法

    这篇文章主要介绍了vue实现微信获取用户信息的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03

最新评论