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

要使用范围内的广告位，请将父级内容包含在template标记中，并带有scope属性：

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

以下是您更新的小提琴：https://jsfiddle.net/Lbz6Ly4a/1/

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

1 个答案: