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

时间:2023-02-03 __Simon 人气:0

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() , 调用的是父组件的方法。

总结

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

加载全部内容