无法将属性传递给 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

要使用作用域插槽，请将您的 parent 的内容包装在具有 scope 属性的 template 标签中：

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

这是您更新后的 fiddle：https://jsfiddle.net/Lbz6Ly4a/1/

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

Cannot pass properties to a component in a slot in vue.js?

javascript

vue.js

vue-component