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

Question

我试图将数据传递到插入（转换）模板。

在Angular中，这可以通过修改传递到transcludeFn的范围来完成，但我无法弄清楚如何在Vue中完成它，因为它简化了事情（我喜欢它）并负责翻译内部。

我已尝试在v-with上使用<content>指令，但似乎它并不适合它。

简化的组件来源

<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

这不起作用，因为被转换的内容在父范围内编译。

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;