$emit&x27；t使用TypeScript触发父组件VueJs

我正在构建一个受控组件（一个组件是父组件，另一个是子组件）。 父组件是SurveyContainer，子组件是SurveyPage1。 在SurveyContainer中，我有一个模型对象surveyModel和嵌套对象surveyModel.topPreferencesObj，我想在SurveyPage 1中初始化它。所以我把这个物体作为道具传递

 <template>
<div>  
    <SurveyPage1
            v-bind:prefObj="this.surveyModel.topPreferencesObj" 
            @handle-change="this.handleChange(arg)" >   

    </SurveyPage1> 
</div>

这是调查第1页。这里我接收属性对象。这里我还有一块手表，每当有什么变化时就会触发。所以，当它触发时，我希望发出，以便父组件知道该属性已更新。但是在watch函数中，我得到了类型错误：无法读取未定义的属性“handle change”我是vuejs新手，现在真的很忙。我在互联网上搜索，它看起来应该能工作，但它不能

<template>
<div>
    <h2>Survey Page 1</h2>
    <v-checkbox v-model="prefObj.option1" label="" >
    </v-checkbox>
</div>
</template> 
<script lang="ts">
 import { Component, Vue,Prop ,Watch} from 'vue-property-decorator'; 
 @Component
 export default class SurveyPage1 extends Vue {

    @Prop({required: true})
    prefObj:any;

    computed(){
        debugger;
        const blah =  this.prefObj;
    }

    @Watch('prefObj', { immediate: true, deep: true })
    onPrefObjChanged = (val: any, oldVal: any) => {
        debugger;

        this.$emit('handle-change', this.prefObj);  // here I get the error: handle-change undefined
    } 
  } 
 </script>

调查第1页
从“Vue属性装饰器”导入{Component，Vue，Prop，Watch}；
@组成部分
导出默认类SurveyPage1扩展Vue{
@Prop（{required:true}）
prefObj：任何；
计算（）{
调试器；
const blah=this.prefObj；
}
@Watch（'prefObj'，{immediate:true，deep:true}）
onPrefObjChanged=（val:any，oldVal:any）=>{
调试器；
this.$emit（'handle-change'，this.prefObj）；//这里我得到一个错误：handle-change未定义
} 
} 

---

谢谢

好的，问题是我使用了不正确的@Watch handler

我有：

@Watch('prefObj', { immediate: true, deep: true })
onPrefObjChanged = (val: any, oldVal: any) => { 
    this.$emit('handle-change', this.prefObj); 
} 

它应该在哪里

    @Watch('prefObj', { immediate: true, deep: true })
       onPrefObjChanged (val: any, oldVal: any) { 
        this.$emit('handle-change', this.prefObj); 
    } 

---

结论：简单函数代替箭头函数

删除模板中的

部分。模板表达式已在组件实例的上下文中求值
arg也没有定义，只需使用
@handleChange=“handleChange”
。此外，还应该使用kebab大小写作为属性名称，即
v-bind:pref obj=“surveyModel.topPreferencesObj”
。请参见您可以执行以下操作：
@handleChange=“handleChange（$event）”
（不带
此
）和更改大小写
此。$emit（'handleChange'，this.prefObj）
删除了“this”，更改为烤肉串大小写。仍然会出现错误。好吧，我发现它不仅仅在@Watch handler中起作用
    @Watch('prefObj', { immediate: true, deep: true })
       onPrefObjChanged (val: any, oldVal: any) { 
        this.$emit('handle-change', this.prefObj); 
    }