スロットからコンポーネントデータにアクセスする方法は？

Question

それは働いていない：https://jsfiddle.net/2ouxsuLh/

var myAwesomeComponent = Vue.component({ 
    template: '<div><slot></slot></div>', 
    data: function() { 
    return { 
     myAwesomeData: 'Message' 
    } 
    } 
}); 

new Vue({ 
    el: '#app', 
    template: '<my-awesome-component>{{ myAwesomeData }}</my-awesome-component>', 
    components: { 
    myAwesomeComponent: myAwesomeComponent 
    } 
}); 

myAwesomeDataが親要素で定義されていないので、それが起こっている、と私たちはしてコンポーネントの変数を使用することはできません。これに代えて

は、我々は我々自身のコンポーネントを作成し、このように私の-素晴らしい成分の内側にそれを渡す必要があります：https://jsfiddle.net/simplesmiler/5p420nbe/

しかし、それはオーバーヘッドだ、そうではありませんか？

たとえば、角度をつけると、次のようになります。http://jsfiddle.net/ADukg/9609/ はるかに簡単です。

Vueでこれを行うことができますか？

Answer 1

scoped slotsを使用すると、角度の例に近似できます。子はテンプレートにslotを定義し、slotタグの属性として、親が利用できるデータを定義します。親は、テンプレートをスロットフィラーとして渡します。テンプレートは、子によって定義されたデータをscope属性で参照することができます。

var myAwesomeComponent = { 
 
    template: '<div><slot myAwesomeData="Directive Message"></slot></div>' 
 
}; 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    test: myAwesomeComponent 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<div id="app"> 
 
    <test> 
 
    <template scope="props"> 
 
     {{ props.myAwesomeData }} 
 
    </template> 
 
    </test> 
 
</div>