vue.js - VueJS：如何访问子函数中的父函数以有条件地呈现 css 类？

Question

我有一个具有类似功能的父组件（简化示例）

isValid(value) { return value > validationModifier }

父级和子级都使用该函数有条件地呈现例如 CSS 类。所以在我的孩子中，我想使用：

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

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

Answer 1

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

混合代码：

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

然后注入您的任何组件

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

Answer 2

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

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

Answer 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']
}

现在您可以在ChildComponentusing中使用该功能this.isValid(yourValueHere)。