2020/08/03 插槽

最新推荐文章于 2022-04-11 11:14:03 发布

太想进步了

最新推荐文章于 2022-04-11 11:14:03 发布

阅读量233

点赞数

文章标签： vue 插槽

本文链接：https://blog.csdn.net/qq_44755188/article/details/107766471

版权

本文详细介绍了Vue中的插槽使用，包括基本用法，如何通过具名插槽区分不同内容，以及如何使用作用域插槽对子组件数据进行加工和展示。在新版本的Vue中，推荐使用v-slot语法来替换旧的slot和slot-scope属性。

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

一，基本用法

就是子组件提供一个坑，父组件想要填什么就通过<slot>往坑里填，插槽里面的内容会被覆盖被父组件填了

或者这样理解：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定

<body>
    <div id="app">
        <com>随便填入点东西</com>
    </div>

</body>
<script>
    var com = {
        template: `<div>
            <h1>下面是插槽内容</h1>
            <slot>杀杀杀</slot>
            </div>`,
    };
    var vm = new Vue({
        el: '#app',
        components: {
            com,
        }
    })
</script>

最低0.47元/天解锁文章

太想进步了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2020/08/03 插槽

一，基本用法就是子组件提供一个坑，父组件想要填什么就通过<slot>往坑里填，插槽里面的内容会被覆盖被父组件填了或者这样理解：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定<body> <div id="app"> <com>随便填入点东西</com> </div></body><script> var
复制链接

扫一扫