Vue.js Passing data to content scope

Question

I'm trying to pass data into inserted (transcluded) template.

In Angular, this would be done by modifying scope passed into transcludeFn, but I can't figure out how to do it in Vue since it simplifies things (I LOVE IT) and takes care of transclusion internally.

I've tried using v-with directive on <content> but it seems like it doesn't work for it.

Simplified component source

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

Usage

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

Expected output

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

Actual output

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

Answer 1

This will not work because transcluded content compiles in the parent scope.

Also now you are using v0.11.x version of Vue. Try to use v0.12.

You can pass data to the component this way:

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>