Vue类组件访问祖辈方法触发Vetur类型错误，求解决方案

1. 类型断言（快速修复类型报错） #

直接将$parent.$parent断言为祖辈Table组件的类型，让TypeScript识别到updateSelected方法：

import Table from './Table.vue' // 导入祖辈组件

export default class ListStoragePlace extends Vue {
    @Prop({ required: true })
    readonly id!: number
    checkbox: boolean = false

    @Watch("checkbox")
    onPropertyChanged() {
        // 通过类型断言指定组件类型
        (this.$parent.$parent as Table).updateSelected(this.id, this.checkbox)
    }
}

注意：这种方法依赖组件嵌套层级，后续如果组件结构调整，代码会失效。

2. 依赖注入（优雅跨层级访问） #

使用Vue的provide/inject机制，祖辈组件提供方法，子组件注入使用，不受层级限制：

• 祖辈Table组件修改：

export default class Table extends Vue {
    selected: number[] = []

    // 提供方法给后代组件
    provide() {
        return {
            updateSelected: this.updateSelected.bind(this)
        }
    }

    updateSelected(id: number, status: boolean) {
        if (status) {
            this.selected.push(id)
        } else {
            const index = this.selected.indexOf(id)
            if (index !== -1) {
                this.selected.splice(index, 1)
            }
        }
    }
}

• 子组件注入并使用：

import { Inject } from 'vue-property-decorator'

export default class ListStoragePlace extends Vue {
    @Prop({ required: true })
    readonly id!: number
    checkbox: boolean = false

    // 注入祖辈提供的方法
    @Inject() private updateSelected!: (id: number, status: boolean) => void

    @Watch("checkbox")
    onPropertyChanged() {
        this.updateSelected(this.id, this.checkbox)
    }
}

3. 事件向上传递（符合Vue数据流规范） #

遵循"props向下，事件向上"的设计理念，子组件触发事件，中间组件转发，祖辈组件监听：

• 子组件修改：

export default class ListStoragePlace extends Vue {
    @Prop({ required: true })
    readonly id!: number
    checkbox: boolean = false

    @Watch("checkbox")
    onPropertyChanged() {
        // 触发自定义事件
        this.$emit('update-selected', this.id, this.checkbox)
    }
}

• 中间父组件（假设为List组件）转发事件：

<template>
  <ListStoragePlace 
    v-for="item in list" 
    :key="item.id" 
    :id="item.id" 
    @update-selected="$emit('update-selected', ...arguments)" 
  />
</template>

<script lang="ts">
import Vue from 'vue'
export default class List extends Vue {}
</script>

• 祖辈Table组件监听事件：

<template>
  <List @update-selected="updateSelected" />
</template>

<script lang="ts">
import Vue from 'vue'
import List from './List.vue'
export default class Table extends Vue {
    selected: number[] = []

    updateSelected(id: number, status: boolean) {
        if (status) {
            this.selected.push(id)
        } else {
            const index = this.selected.indexOf(id)
            if (index !== -1) {
                this.selected.splice(index, 1)
            }
        }
    }
}
</script>

推荐：这种方式组件解耦，数据流向清晰，是最符合Vue设计思想的方案。

4. 临时绕过类型检查（仅应急） #

如果需要快速跳过Vetur报错，可使用// @ts-ignore注释忽略该行的类型检查：

@Watch("checkbox")
onPropertyChanged() {
    // @ts-ignore
    this.$parent.$parent.updateSelected(this.id, this.checkbox)
}

不推荐长期使用：会掩盖潜在的类型问题，不利于代码维护。

内容的提问来源于stack exchange，提问作者Dainank