VueJS：如何访问子函数中的父函数以有条件地渲染 css 类？答案

【问题标题】：VueJS: How to to access parent function in child to conditionally render css classes?VueJS：如何访问子函数中的父函数以有条件地渲染 css 类？
【发布时间】：2020-07-15 13:10:21
【问题描述】：

我有一个 parent 组件，其功能类似于（简化示例）

isValid(value) { return value > validationModifier }

父母和孩子都使用该功能有条件地渲染，例如CSS 类。所以在我的孩子中，我想使用：

:class="{'my-class' : isValid(myValue)}"

但我无权使用此功能。我想避免在孩子身上复制它，而且我看不出在这种情况下发出事件是如何工作的。处理这个问题的适当方法是什么？

【问题讨论】：

标签： vue.js vuejs2 vue-component parent-child vue-events

【解决方案1】：

如果函数具有可重用逻辑，而不是特定于该父组件，那么我会使用 mixin。如果您想添加任何其他共享逻辑（方法、计算函数），您可以编辑 mixin 而不必显式将新参数添加到父子节点

混合代码：

const myMixin = {
    methods:{
        isValid(param1){
            return param1 < validationModifier 
        }
    
    }
}

然后注入到您的任何组件中

{
  name: "my-custom-component",
  mixins:[myMixin],
  methods:{}
}

【讨论】：

【解决方案2】：

您可以像经典函数道具https://vuejs.org/v2/guide/components-props.html#Prop-Types 一样将函数传递给孩子此处无需使用事件/发射系统。

<child v-bind:is-valid="isValid"></child>

【讨论】：

【解决方案3】：

@Joel H 的回答是在 Vue 中重用函数的方法之一。另一种方法是在 Vue 中使用依赖注入。见https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection

您只需要provide 方法，ParentComponent 的所有子组件都可以访问该isValid 方法。 Vue 中的依赖注入不仅限于函数，还可以传递变量和数据。

export default {
  name: 'ParentComponent',
  ...
  methods: {
    isValid(value) { return value > validationModifier },
  },
  provide() {
    return {
      isValid: this.isValid
    }
  }
}

在你的ChildComponent...

export default {
  name: 'ChildComponent',
  ...
  inject: ['isValid']
}

现在您可以使用ChildComponent 中的函数this.isValid(yourValueHere)。

【讨论】：