Vue2.x之插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <child>
        <div slot="header"></div>
        <div slot="footer"></div>
    </child>
</div>
<script>
    Vue.component('child',{
        template:`<div>
                        <slot name='header'></slot>
                        <div>hello world</div>
                        <slot name='footer'></slot>
                  </div>`
    });
    let vm = new Vue({
        el:'#root',

    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_33733970/article/details/80647485