Vue中插槽和作用域的使用

最新推荐文章于 2024-11-05 17:05:39 发布

together67

最新推荐文章于 2024-11-05 17:05:39 发布

阅读量163

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46426610/article/details/105516034

版权

本文介绍了Vue中插槽的使用，包括普通插槽、具名插槽和作用域插槽的概念及应用。普通插槽用于父组件传递内容到子组件；具名插槽用于在有多个相同插槽时进行区分；作用域插槽则允许父组件定制子组件内部的数据渲染方式，通常配合`template`标签使用。

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

今天看视频学习Vue插槽的时候，听得一脸懵逼，然后在各种文章上也没看出个一二三来…最后终于在一个大佬博客里看懂了
1.插槽（slot）:个人理解，就是父组件调用子组件标签和标签里的内容，如果不在子组件模板中调用，在页面中就渲染不出来

// 插槽
<body>
    <div class="zhu">
        <hello>
            我是父组件标签
        </hello>
    </div>
    <script>
        Vue.component('hello',{
   
            template:`<div>
            			<slot><slot> 
                      </div>`
        })
        var vm = new Vue({
   
            el:'.zhu'
        })
    </script