在Vue中使用插槽

最新推荐文章于 2024-05-28 17:25:55 发布

学会改变Lxw

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量259

点赞数

分类专栏： Vue学习笔记记录文章标签： vue html

本文链接：https://blog.csdn.net/lxw88586390/article/details/107099108

版权

Vue学习笔记记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

作用

主要是为了让父组件向子组件优雅的传递dom结构

使用方式

通过子组件中的slot标签显示在子组件中添加的dom元素

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue中的插槽(slot)</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <child>
            <div slot='slot1'>header</div>
            <div slot='slot2'>fotter</div>
        </child>
    </div>

    <script>
        Vue.component('child', {
            template: `<div>
            <slot name='slot1'>default value1</slot>
            <p>hello world</p>
            <slot name='slot2'>default value2</slot>
            <slot name='slot3'>default value3</slot>
            </div>`,

        })

        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

如上方代码

可以根据slot标签里面的name属性对应不同的插槽，如果模板里面定义的插槽没有被调用，则会显示插槽里面默认的值，如slot3
如果插槽没有指定name的话，则会将模板里面所有的div都会显示出来

作用域插槽

当模板中的数据显示样式需要由外部决定的时候，可以使用作用域插槽来实现
作用域插槽必须是template标签，通过slot-scope属性获取到子组件的数据，然后根据自己的需要对数据进行展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue中的作用域插槽</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <child>
            <template slot-scope='props'>
                <h1>{{props.item}}</h1>
            </template>
        </child>
    </div>

    <script>
        Vue.component('child', {
            data: function () {
                return {
                    list: [1, 2, 3, 4]
                }
            },
            template: `<div>
            <ul>
            <slot v-for="item of list" :item=item> </slot>
            </ul>
            </div>`,

        })

        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

学会改变Lxw

关注

0
点赞
踩
0

收藏

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

作用主要是为了让父组件向子组件优雅的传递dom结构使用方式通过子组件中的slot标签显示在子组件中添加的dom元素示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue中的插槽(slot)</title> <script src="./vue.js"></script></h
复制链接

扫一扫

专栏目录