VueJS组件可以传递一个表达式/函数来运行吗？

Question

首先，请放轻松对待我，我是Vue的新手并且仍在努力理解它，但我在Angular有经验。

我试图找到此代码的Vue equivelant，它使用Angular-UI组件......

<uib-datepicker date-disabled="myController.isDateDisabled(day)"></uib-datepicker>

并在控制器中：

vm.isDateDidabled = function(day){
    return (day === 7); // Example test for Sundays
};

该组件使用＆＃39;＆amp;＆＃39;来自控制器的传递表达式。绑定并在需要时运行它。我还没有在Vue看到过这种情况。这可以用道具来完成吗？

Answer 1

绝对

让我们举个例子 - 我们有一个日期选择器：

<date-picker></date-picker>

Vue组件可以接收props。如果我们想给日期选择器组件一个“禁用”的支柱，它会看起来像这样：

<date-picker v-bind:disabled="true"></date-picker>

当您使用v-bind指令时，引号内的表达式将被计算为javascript，假定的上下文是其模板的组件。

所以，如果我们有一个组件：

Vue.component('parent', {
  methods: {
    isDisabled (day) {
      return day === 7
    }
  }
})

您可以简单地执行该方法来获取prop的值（每次组件渲染时都会重新评估）。

<date-picker v-bind:disabled="isDisabled(5)"></date-picker>