Javascript 无法将属性传递给vue.js中插槽中的组件？

我试图使用Vue.js（v2.1.3）创建嵌套组件，但我不知道如何在它们之间绑定数据

这表明了我正在努力实现的目标

HTML

 <div id="test">
   <comp1>
     <comp2 :message="message"></comp2>
   </comp1>
 </div>

JS

var模板=`
`;
Vue.组件（“组件1”{
模板：模板，
数据：函数（）{
返回{
留言：“你好”
};
}
});
变量模板2=`
消息是：{{Message}}
`;
Vue.组件（“组件2”{
模板：模板2，
道具：[“信息”]
});
新Vue({
el:“测试”
});

如果我直接在父组件的模板中声明子组件，那么数据将正确传递。但是，当子组件被分配到父组件中的插槽时，数据不会被传递

我已经反复阅读了文档，但不知道我想做的是否可能，如果可能，我做错了什么

---

任何帮助解决此问题的人都将不胜感激

要使用作用域插槽，请使用

作用域

属性将父级内容包装在

模板

标记中：

---

这是您更新的fiddle:

感谢您提供此答案-我可以看到它在fiddle中运行良好，但由于某些原因，它在我拥有它的上下文中不起作用（我正在以编程方式构建DOM，然后在其上创建新的Vue）。。。不确定区别是什么，但这确实帮助了我的进步，非常感谢。@DaveDraper说这是因为

2.1.0

，也许可以检查你的版本？谢谢你的建议，但我使用的是2.1.3

    var template = `<div>
      <comp2 :message="message"></comp2>
      <slot :message="message"></slot>
    </div>`;

    Vue.component("comp1", {
      template: template,
      data: function() {
        return {
          message: "Hello"
        };
      }
    });

    var template2 = `<div>
       <span>Message is: {{ message }}</span>
    </div>`;

    Vue.component("comp2", {
      template: template2,
      props: ["message"]
    });

    new Vue({
      el: "#test"
    });