vue学习笔记-组件篇（插槽）

最新推荐文章于 2024-04-25 12:50:07 发布

置顶 VickQ

最新推荐文章于 2024-04-25 12:50:07 发布

阅读量159

点赞数

分类专栏： web前端-vue 文章标签： vue.js vue组件 vue组件插槽

本文链接：https://blog.csdn.net/qq_43069222/article/details/103389001

版权

web前端-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

匿名插槽

当组件中有插槽内容是显示插槽内容
当组间中没有插槽内容是，会默认显示slot中的插槽内容

代码如下:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
        <my-component>插槽内容</my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //全局注册组件
    //第一个参数自定义标签名
    Vue.component('my-component', {
        template: `
            <div>
                <slot><span>默认插槽内容</span></slot>
            </div>
        `
    })
    //创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })


</script>

</html>

页面显示结果如下:
在这里插入图片描述
当组建中没有插槽内容是会默认显示slot中的内容

具名插槽

有名字的插槽
slot中带有name的插槽

代码如下（这里使用了2.6.0+新增的v-slot指令）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <my-component>
            <template #header>
                <h1>页面头部</h1>
            </template>
            <template>
                <h1>页面内容</h1>
            </template>
            <template #footer>
                <h1>页面底部</h1>
            </template>
        </my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //全局注册组件
    //第一个参数自定义标签名
    Vue.component('my-component', {
        template: `
            <div>
                 <div class="container">
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>
                </div>
            </div>
        `
    })
    //创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })


</script>

</html>

页面显示结果如下：
在这里插入图片描述

作用域插槽

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致

代码如下(这里使用了2.6.0+新增的v-slot指令):

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <my-component>
            <!--独占默认插槽  -->
            <!-- <template v-slot:default="slotProps">
                姓名: {{slotProps.user.firstName+slotProps.user.firstName.lastName}}
            </template> -->

            <!--不带参数的 v-slot 被假定对应默认插槽：  -->
             <!--独占默认插槽缩写形式+对象解构更简单  -->
            <template v-slot="{user}">
                姓名: {{user.firstName+''+user.lastName}}
            </template>

        </my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //全局注册组件
    //第一个参数自定义标签名
    Vue.component('my-component', {
        data: function () {
            return {
                user: {
                    lastName: '肖战',
                    firstName: '李'
                }
            }

        },
        template: `
            <div>
                <span>
                    <slot :user="user">{{ user }}</slot>
                </span>
            </div>
        
        `
    })
    //创建vue实例
    var vm = new Vue({
        el: '#app',

        methods: {

        }
    })


</script>

</html>

页面显示结果如下
在这里插入图片描述

VickQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-组件篇（插槽）

匿名插槽当组件中有插槽内容是显示插槽内容当组间中没有插槽内容是，会默认显示slot中的插槽内容代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head&...
复制链接

扫一扫