0

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

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

    </SurveyPage1> 
</div>


@Component({
components: {
    SurveyPage1
}
})
export default class SurveyContainer extends Vue {

mounted(){ 

}
surveyModel = { 
    topPreferencesObj : {
        option1: false,
        option2: false,
        option3: false,
        option4: false,
        other:""
    }
} 
handleChange(payload:any) {   // this never fires 
    this.surveyModel.topPreferencesObj = payload;  
}
}

这是调查页面 1。在这里，我收到属性对象。另外在这里，我有一块手表，每次发生变化时都会触发。因此，当它触发时，我想发出，以便父组件知道该属性已更新。但是在 watch 函数中我得到TypeError: Cannot read property 'handle-change' of undefined 我是 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>

谢谢。

4

1 回答 1

1

好的，所以问题是我错误地使用了不正确的@Watch处理程序

我有：

@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); 
    }

结论：简单函数而不是箭头函数

于 2020-03-31T11:11:17.323 回答