VUE----插槽的基本了解和使用

最新推荐文章于 2024-07-26 13:02:41 发布

codesWang

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量241

点赞数

分类专栏： VUE学习文章标签： vue

本文链接：https://blog.csdn.net/qazzwx/article/details/106107501

版权

本文介绍了Vue中的插槽概念，包括基本使用、具名插槽和作用域插槽。通过示例展示了如何在父组件中利用插槽与子组件进行交互，以实现更灵活的内容定制。

摘要由CSDN通过智能技术生成

基本概念：插槽就是子组件中的提供给父组件使用的一个占位符 <slot></slot>

1.插槽的基本使用

<body>
    <div id="app">
        <base-layout>沉默是金</base-layout>
        <base-layout>倩女幽魂</base-layout>
    </div>
    <script>
        Vue.component('base-layout', {
            template: `
            <div>
                <p>歌名</p>
                 <slot></slot>
            </div>`
        })
        new Vue({
            el: '#app',
            data() {
                return {
                }
            }
        })
    </script>
</body>

运行如下图