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

最新推荐文章于 2024-01-04 11:05:27 发布

置顶 VickQ

最新推荐文章于 2024-01-04 11:05:27 发布

阅读量272

点赞数

分类专栏： 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>