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

Question

我制作了一个具有 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?

中导航

Answer 1

你应该看看 Vuex

这样的状态管理库

或使用provide/inject

Answer 2

一个解决方案是使用 provide/inject，其中父 provide 是方法，深度嵌套的子可以 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)
    }
  }
}

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

How to access a method in a deep nested parent [Vue][Vuetify]

components

parent

vue.js

vuetify.js