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

目录

• Vue props传入function时的this指向
• 踩坑笔记
• 我的解决方案
• Vue props 传递函数
• Props的type是函数
• 总结

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中使用props传值的方法
• vue父组件通过props如何向子组件传递方法详解
• 解决vue props传Array/Object类型值,子组件报错的情况

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！