javascript - vue2.0怎麼用元件自訂標籤實作元件的嵌套？

Question

想用這種方式實作元件巢狀：

<p id="app">
    <app-content>
        <my-header></my-header>
        <my-footer></my-footer>
    </app-content>
</p>

---

目前實作的方式：是在app-content.vue中的template中嵌套的

index.html

#

<p id="app">
    <app-content> </app-content>
</p>

main.js

#

import Vue from '../node_modules/vue/dist/vue';
import app from './app.js';
new Vue(app);

app.js

#

import content from '../components/app-content.vue'
module.exports={
    el:"#app",
    data:{},
    components:{
        appContent:content
    }
};

app-content.vue

<template>
    <p id="content">
        <my-header></my-header>
        <my-footer></my-footer>
    </p>
</template>
<style>
    #content{
        height: 100vh;
        width: 100vw;
        background: rgb(240,240,240);
        position: relative;
    }
</style>
<script>
    import myHeader from './app-top.vue';
    import myFooter from './app-bottom.vue';
    export default {
        components:{
            myHeader,
            myFooter
        }
    }
</script>

Answer 1

我寫了一個例子如下。

<p id="app">
    <app-content>
        <my-header></my-header>
    </app-content>
</p>
<script>

    Vue.component("my-header",{
        template: '<h3>this is my-header template </h3>',
    });
    Vue.component("app-content",{
        template: '<p>this is app-content template <slot></slot></p>'
    });
    var app = new Vue({
        el: '#app'
    });
</script>

輸出效果