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

Question

我正在尝试使用Vue.js（v2.1.3）来创建嵌套组件，但我无法弄清楚如何在它们之间绑定数据。

这个JSFiddle演示了我想要实现的目标。

HTML ...

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

JS ...

    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"
    });

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

我已阅读并重新阅读文档，但无法弄清楚我想做的事情是否可行，如果可能，我做错了什么。

任何帮助解决这个问题将不胜感激！

Answer 1

要使用作用域插槽，请将父级内容包含在带有scope属性的template标记中：

<comp1>
  <template scope="{ message }">
    <comp2 :message="message"></comp2>
  </template>    
</comp1>

这是你更新的小提琴： https ： //jsfiddle.net/Lbz6Ly4a/1/