Question

是否可以在VueJs上将道具作为功能传递？

<template>
    <line-chart 
    class="card-content" 
    :chartData="lineData2('Temp')" 
    :options="options" 
    :width="800">
    </line-chart>
</template>

chartData道具可以用作方法吗？有没有办法在道具上传递方法？

干杯，

Answer 1

这取决于你想要做什么。如果要传递实际函数而不是函数的结果，可以执行以下操作：

<line-chart class="card-content" :chartData="() => lineData2('Temp')" :options="options" :width="800"></line-chart>

哪个会传递lineData2函数本身，但是，它仍将在父作用域中执行，而不是在组件作用域中执行，因此它将无法访问组件this上下文

这是一个JSFiddle：https://jsfiddle.net/rz8c1v4L/

如果您只想传递函数的结果，那么您正在做的事情很好。

Answer 2

是的，你可以。只要您的函数返回一个值。一切都应该有效。

Answer 3

是的，你可以！您可以通过提及道具的类型来实现这一点，因为它清楚地写在Vue的文档中。例如，

Vue.component('example', {
  props: {
    propA: {
      type: function
    }
  }
})

另请查看此link

道具中的Vuejs参数

3 个答案: