Vue插槽

最新推荐文章于 2023-01-31 17:52:09 发布

ohmorning

最新推荐文章于 2023-01-31 17:52:09 发布

阅读量91

点赞数

文章标签： vue 插槽

本文链接：https://blog.csdn.net/qq_41818857/article/details/106649245

版权

使用插槽的情景：

当父元素想给子元素传递大量数据或标签时，这时用数组或字符串都不太方便，而插槽可以实现。

定义：

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码

例如：

<body>
    <div id="app">
        <my-div>
            <i>插槽</i>
        </my-div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

    <script>
        Vue.component('my-div', {
            template:`<div>
                <h1>hello world</h1>
                <slot></slot>
            </div>`
        })
        new Vue({
            el: '#app', 
            data() {
                return {

                }
            }
        });
    </script>
</body>

具名插槽：

Vue.component('my-div', {
            template:`<div>
                <h1>hello world</h1>
                <slot name='cc'></slot>
            </div>`
        })

在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
在这里插入图片描述
或将v-slot:cc简写：成#cc

在这里插入图片描述

ohmorning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽

使用插槽的情景：当父元素想给子元素传递大量数据或标签时，这时用数组或字符串都不太方便，而插槽可以实现。定义：插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码例如：<body> <div id="app"> <my-div> <i>插槽</i> </my-div> </div> <s
复制链接

扫一扫