VueJS組件可以傳遞一個表達式/函數來運行嗎？

Question

首先，請在我身上輕鬆一下，我是Vue的新手，仍然試圖理解它，但是我對Angular很有經驗。

我試圖找到這個代碼，它使用一個角UI組件的Vue公司equivelant ...

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

，並在控制器：

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

的組件使用使用'&'綁定從控制器傳遞表達式，並在需要時運行它。我還沒有在Vue中看到過這個。這可以用道具來完成嗎？

Answer 1

絕對。

讓我們把你的例子 - 我們有一個datepicker：

<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 
    } 
    } 
}) 

你可以簡單地執行該方法得到的道具（這將是重新評估每一個組件呈現時間）值。

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