Les composants VueJS peuvent-ils transmettre une expression/fonction à exécuter?

Question

Tout d'abord, s'il vous plaît allez-y doucement, je suis nouveau à Vue et j'essaie toujours de le comprendre, mais je suis expérimenté dans Angular.

J'essaie de trouver le equivelant Vue de ce code, qui utilise un composant angulaire-UI ...

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

et dans le contrôleur:

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

Le composant utilise un transmis l'expression de votre contrôleur en utilisant une liaison '&' et l'exécute quand il le faut. Je n'ai pas encore vu ça dans Vue. Cela peut-il être fait avec des accessoires?

Answer 1

Absolument.

Prenons votre exemple - nous avons un DatePicker:

<date-picker></date-picker>

composants Vue peuvent recevoir props. Si nous voulions donner le composant sélecteur de date un accessoire « désactivé » il regarderait ce ceci:

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

Lorsque vous utilisez la directive v-bind, l'expression à l'intérieur des citations est évaluée comme javascript, le contexte supposé étant le composant dont le modèle est.

Donc, si nous avons un composant:

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

Vous pouvez simplement exécuter cette méthode pour obtenir la valeur de l'hélice (ce sera réévalué chaque fois que le composant rend).

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