快捷導(dǎo)航

Vue?props傳入function時(shí)的this指向問題解讀

更新時(shí)間：2023年01月21日 09:03:36 作者：__Simon

這篇文章主要介紹了Vue?props傳入function時(shí)的this指向問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue props傳入function時(shí)的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時(shí)，函數(shù)中this自動(dòng)綁定Vue實(shí)例；

在H5的Vue中項(xiàng)目中，console將輸出 “this is parent.”；

但在uni-app小程序中使用Vue時(shí)，console將輸出“this is child”；

我的解決方案

將父組件msg作為參數(shù)傳給子組件，子組件props接收msg，然后在父組件的parantFunc中，無論this 指向父組件還是子組件，this.msg總能取得正確的值；

為什么不使用v-on監(jiān)聽子組件事件并用$emit觸發(fā)事件？

Vue中不推薦向子組件傳遞Function的方式，因?yàn)閂ue有更好的事件父子組件通信機(jī)制；
我的原因：項(xiàng)目中的子組件是一個(gè)公共組件，原本的代碼是使用props+Function的方式，且存在默認(rèn)值，默認(rèn)調(diào)用函數(shù)default默認(rèn)值；如果改為事件$emit的方式，則涉及修改的地方較多；
因此，在盡量不影響原來的業(yè)務(wù)代碼的原則下，采用上述解決方案解決該問題；

Vue props 傳遞函數(shù)

Props的type是函數(shù)

通過 props 傳遞函數(shù) 看看有啥用。

// 父組件

</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)">點(diǎn)擊加 1 </button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count:1,
        }
    },
    props:{
        add:{
            type: Function
        }
    },
    methods: {
        handClick(){
            this.add( ++this.count); // 父組件方法
        }
    },
}

結(jié)果