How to access component data from a slot?

Question

Doesn't work: 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
  }
});

This is because myAwesomeData is not defined in the parent component, and we cannot use component variables with.

Instead, we need to create our own component and pass it inside my amazing component as follows: https://jsfiddle.net/simplesmiler/5p420nbe/

But this is overhead, isn't it?

For example, in angular we can do this: http://jsfiddle.net/ADukg/9609/ This is much simpler.

Can we do something like this in Vue?

Answer 1

> , Angular. 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>

Hide result