Reacts this.props.children in vue.js component

Vue.js has this.$children, which also gives you an array of child components

http://vuejs.org/api/#vm-children

If you want to reference specific components, you might want to use v-ref and this.$refs

In your requirement：

Using slot is a right way to pass a custom component into the child component, when you are in the parent component level.

But why doesn't it work? Because in Vue 1.0, it uses the browser to parse the template, not virtual DOM. Browser-parsing has a problem: some HTML elements have restrictions on what elements can appear inside them.

see Vue1.0 Doc: vue1.0 - components - template parsing

And you happen to make that mistake.

This is a limitation in Vue1.0, you have to write some Directives to do them.

But in Vue 2.0, things have changed, the template-parsing became a virtual-dom implement. You can pass any DOM elements into slot.

I try your link in last comment with Vue 2.0, it works.

Just change the External Resources to https://unpkg.com/[email protected]/dist/vue.js

The equivalent to this.props.children in Vue is <slot />.

Example

<template>
  <div>
    <slot />
  </div>
</template>

See http://vuejs.org/guide/components.html#Content-Distribution-with-Slots