Vue props傳入function時的this指向問題解讀

2023-01-22 14:00:40

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() , 呼叫的是父元件的方法。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。