title: How to access component data from slot?
body: <p>It's not working: <a href="https://jsfiddle.net/2ouxsuLh/" rel="nofollow noreferrer">https://jsfiddle.net/2ouxsuLh/</a></p>
  
  <pre><code>var myAwesomeComponent = Vue.component({
      template: '&lt;div&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;',
    data: function () {
      return {
          myAwesomeData: 'Message'
      }
    }
  });
  
  new Vue({
      el: '#app',
    template: '&lt;my-awesome-component&gt;{{ myAwesomeData }}&lt;/my-awesome-component&gt;',
    components: {
      myAwesomeComponent: myAwesomeComponent
    }
  });
  </code></pre>
  
  <p>It's happening because myAwesomeData isn't defined in parent component, and we can't use component's variables with .</p>
  
  <p>Instead of this, we need to create our own component and pass it inside my-awesome-component like this: <a href="https://jsfiddle.net/simplesmiler/5p420nbe/" rel="nofollow noreferrer">https://jsfiddle.net/simplesmiler/5p420nbe/</a></p>
  
  <p>But it's overhead, isn't it?</p>
  
  <p>For example, in angular we can do this: <a href="http://jsfiddle.net/ADukg/9609/" rel="nofollow noreferrer">http://jsfiddle.net/ADukg/9609/</a>
  It's much simplier. </p>
  
  <p>We can do something like this in Vue?</p>