它不起作用：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未在父组件中定义，并且我们无法将组件的变量与一起使用。
相反，我们需要创建自己的组件，并将其传递到my-awesome-component中，如下所示：https://jsfiddle.net/simplesmiler/5p420nbe/
但这是在头顶上，不是吗？
例如，在Angular 方面，我们可以这样做：http://jsfiddle.net/ADukg/9609/这要简单得多。
我们可以在Vue中做这样的事情吗？