javascript - Wie implementiert Vue2.0 benutzerdefinierte Komponenten-Tags, um die Komponentenverschachtelung zu implementieren?

Question

Möchten Sie die Komponentenverschachtelung auf diese Weise implementieren:

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

---

Die aktuelle Implementierungsmethode: verschachtelt in der Vorlage in app-content.vue

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>

输出效果