如何访问深层嵌套父级中的方法 [Vue][Vuetify]

Posted 2023-02-23

【中文标题】如何访问深层嵌套父级中的方法 [Vue][Vuetify]

【英文标题】：How to access a method in a deep nested parent [Vue][Vuetify]

【发布时间】：2021-07-04 17:34:34

【问题描述】：

我制作了一个带有 v-data-table 的 Vue 组件。

子组件

    <template>
    <div>
        <v-data-table>
            <template v-slot:item.actions=" item ">
                <v-tooltip bottom>
                    <template v-slot:activator=" on, attrs ">
                        <v-icon @click="validation(item)"> mdi-check <v-icon/>
                    <span> Validar movimentação </span>
                </v-tooltip>
            </template>
        </v-data-table>
    </div>
</template>
<script>
export default 
        name: "ViewDraftTable",
        data() 
            return 
                movimentacoesSalvasHeader: [...]
            
        ,
        methods: 
            validation(item) 
                this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.validateMov(item)
            ,
        
    
</script>

在父级中，我有validate() 方法。 我应该如何调用这个方法，而不必在嵌套的$parents 中导航？

【参考方案1】：

你应该看看像Vuex这样的状态管理库

或者使用提供/注入

【讨论】：

Thx，我知道 Vuex，但我想这不是使用它的情况，因为它是来自孩子的简单方法调用。我正在考虑一些事情，比如在孩子身上引用父母的方法。

【参考方案2】：

一种解决方案是使用provide/inject，其中父provides 方法，深层嵌套的子可以在需要时inject：

// Parent.vue
export default 
  provide() 
    return 
      validate(item) 
        /* perform validation */
      
    
  


// ViewDraftTable.vue
export default 
  inject: 
    validate: 
      default: item =>  /* perform default validation */ 
    
  ,
  methods: 
    validacao(item) 
      this.validate(item)