Vue.js 将数据传递到内容范围

Question

我正在尝试将数据传递到插入（转入）模板中。

在 Angular 中，这将通过修改传递给 transcludeFn 的范围来完成，但我无法弄清楚如何在 Vue 中执行此操作，因为它简化了事情（我喜欢它）并在内部处理了嵌入。

我尝试在<content> 上使用v-with 指令，但它似乎不起作用。

简化的组件源码

<template>

    <div>
        <ul>
            <li v-repeat="tab: tabs">
                <content></content>
            </li>
        </ul>
    </div>

</template>

<script>
module.exports = {

    data: function () {
        return {

            tabs: [{ name: 'First' }, { name: 'Second' }]

        };
    }

};
</script>

用法

<div v-component="my-component">
    <pre>{{ $data | json }}</pre>
</div>

预期产出

<div>
    <ul>
        <li>
            <pre>{ "name": "First" }</pre>
            <pre>{ "name": "Second" }</pre>
        </li>
    </ul>
</div>

实际输出

<div>
    <ul>
        <li>
            <pre>{"tabs": [{ "name": "First" }, { "name": "Second" }]}</pre>
            <pre>{"tabs": [{ "name": "First" }, { "name": "Second" }]}</pre>
        </li>
    </ul>
</div>

Answer 1

这不起作用，因为嵌入的内容在父范围内编译。

另外，您现在使用的是 v0.11.x 版本的 Vue。尝试使用 v0.12。

您可以通过这种方式将数据传递给组件：

new Vue({
  el: "#app",
  data: {
    tabs: [{ name: 'First' }, { name: 'Second' }]
  },
  components: {
    'my-comp': {
      template: "#mycomp",
      props: ['tabs'],
    }
  }
})

<template id="mycomp">
    <div>
        <ul>
            <li v-repeat="tab: tabs">
                <pre>{{tab | json }}</pre>
            </li>
        </ul>
    </div>
</template>

<div id="app">
   <my-comp tabs="{{tabs}}" />  
</div>
<script src="https://rawgit.com/yyx990803/vue/dev/dist/vue.js"></script>