【001】Vue插槽及其插槽作用域

小李USER

已于 2022-12-21 12:41:32 修改

阅读量98

点赞数

分类专栏：待整理文章标签： vue.js 前端

于 2022-12-21 11:40:49 首次发布

本文链接：https://blog.csdn.net/m0_59110131/article/details/128389280

版权

待整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

创建Vue实例，相当于创建了一个组件。

props: 接收父组件传递到子组件中的数据。

插槽:接收父组件向子组件传递的html文本。

插槽代码

定义好组件之后，我们可以当成标签来使用组件。

如果向这种组件之间写入内容，组件标签内所有的内容默认都会被忽略，不会渲染在页面中的。

如果想要显示，显示方法如下：通过<slot>标签来接收父组件向子传递的html文本。

遇到的问题：显示不出来插槽作用域里面的内容。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽问题</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body,
        p {
            margin: 0;
            padding: 0;
        }

        #layout {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        #layout>header {
            height: 100px;
            background-color: skyblue;
            /* 解决上边距塌陷 */
            /* overflow: hidden; */
        }

        #layout>main {
            height: 400px;
            background-color: seashell;
        }

        #layout>footer {
            height: 80px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 父组件模板 -->
    <div id="app">
        <!-- id打在div上了 -->
        <base-layout id="layout">
            <p>插入头部</p>
            <p>插入主体</p>
            <p>插入底部</p>
            <template v-slot:header>
                <p>补充内容</p>
            </template>
            <template v-slot:default>
                <p>1111</p>
            </template>
        </base-layout>

        <!-- 问题：显示不出来 -->
        <base-layout v-slot='slotProps'>{{slotProps.user.id}}</base-layout>
    </div>

    <!-- 子组件模板 -->
    <template id="baseLayout">
        <div>
            <header>
                <p>头部</p>
                <slot name="header"></slot>
            </header>
            <main>
                <p>主体</p>
                <slot name="default"></slot>
            </main>
            <footer>
                <p>底部</p>
                <slot>后备内容</slot>
            </footer>

            <div>
                <slot :user="user"></slot>
            </div>
        </div>


    </template>
    <script>
        var baseLayout = {
            template: '#baseLayout',
            data() {
                return {
                    user: {
                        id: 1001,
                        age: 18
                    }
                }
            }
        }
        Vue.component('baseLayout', baseLayout)
        let vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

作用域插槽代码：

作用域插槽：为了让子组件的数据能够在父组件的编译作用域中使用。

<body>
    <div id="app">
        <current-user v-slot:default="slotProps">{{slotProps}}</current-user>
        <current-user v-slot="slotProps">{{slotProps.user.username}}</current-user>
        <current-user v-slot="slotProps">{{slotProps.user.realname}}</current-user>
        <current-user v-slot="{user}">{{user.email}}</current-user>
        <current-user v-slot="{user}">{{user.mobile}}</current-user>
    </div>
    <template id="cuser">
        <div>
            <h2>当前用户组件</h2>
            <slot :user="user">无数据</slot>
        </div>
    </template>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var currentUser = {
            template: '#cuser',
            data() {
                return {
                    user: {
                        username: 'Steven',
                        realname: '史蒂芬',
                        email: 'steven@qq.com',
                        mobile: '13012345678'
                    }
                }
            }
        }
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs'
            },
            components: {
                currentUser
            }
        })
    </script>
</body>

感悟：好好学习，提升自我，莫浪费时间在不值得的人身上，除非你很有决心，否则注定失败。