vue.js 2 如何正确嵌套组件

Question

您能告诉我如何正确地将组件添加到其他组件吗？ 下面的示例不起作用。子组件不显示在父组件中。

<div id="app">
    <parent>
        <child></child>
    </parent>
</div>

<template id='child'>
    <div>child component</div>
</template>

<template id='parent'>
    <div>parent component</div>
</template>

<script>

    var child = {
        template: '#child',
        data: function () {
            return {}
        }
    };

    var parent = {
        template: '#parent',
        data: function () {
            return {}
        }
    };

    new Vue({
        el: '#app',
        components: {
            'parent': parent,
            'child': child
        }
    })
</script>

示例：https://jsfiddle.net/05gc05sk/1/

如何正确嵌套组件？

Answer 1

您的代码确实有效。

仅将<slot> (Content Distribution with Slots) 添加到您的父组件。

<template id='parent'>
  <div>
    parent component
    <slot></slot>
  </div>
</template>