javascript - vue2.0怎么用组件自定义标签实现组件的嵌套？

问题描述

问 题

想用这种方式实现组件嵌套：

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

---

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

index.html

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

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>
    <div id="content">
        <my-header></my-header>
        <my-footer></my-footer>
    </div>
</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>

解决方案

我写了个例子如下。

<div id="app">
    <app-content>
        <my-header></my-header>
    </app-content>
</div>
<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>

输出效果

这篇关于javascript - vue2.0怎么用组件自定义标签实现组件的嵌套？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！