Kann ich berechnete Eigenschaften innerhalb der Komponente-slot?

Kürzlich fand ich heraus, dass ich nicht verwenden können, berechnete Eigenschaft oder eine Daten-Eigenschaften in den Komponenten-Schlitz. Obwohl berechnet wird, die in der Komponente definiert, ich bin nicht in der Lage, es zu benutzen in der Komponente Steckplatz. Gibt es eine Möglichkeit, bekommen es funktioniert?

Beispiel-code:

Vue.component('test-component', {
   template: '<div><slot></slot></div>',
   computed: {
      my_computed: function(){
         return 2+3; //not defined in slot
      }
    }
})
<div id="app">
     <test-component>
        <span v-text="my_computed"></span>
     </test-component>
</div>

Siehe live-Beispiel hier
https://jsfiddle.net/gu9jh4n0/1/

InformationsquelleAutor El Danielo | 2018-01-26



One Reply
  1. 6

    Könnte man eine Gültigkeitsbereich Slot zu erreichen.

    In deinem Beispiel, die Komponente wird so Aussehen :

    Vue.component('test-component', {
      template: '<div><slot :computed="my_computed"></slot></div>',
      computed: {
        my_computed: function(){
            return 2+3; //not defined in slot
        }
      }
    });
    

    Und die Haupt-template-ruft den slot-Bereich und verwenden Sie die berechnete :

    <test-component>
      <span slot-scope="data" v-text="data.computed"></span>
    </test-component>
    

    Live-Beispiel.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.