Vue学习（十）——slot插槽

最新推荐文章于 2023-04-02 11:02:01 发布

秃头的毛睿

最新推荐文章于 2023-04-02 11:02:01 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/109080820

版权

1.slot的基本使用

slot可以被理解为就是一个占位标签，在调用的时候才会被指定为一个特定的标签来代替这个占位标签，调用时只需要在自定义标签中写入已个新的标签就可以指定为该标签了，多写的话就会指定为写入的所有标签放入该位置

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>

    <!--父组件模板-->
    <div id="jdg">
        <newtmp><button>按钮</button></newtmp>
        <newtmp><span>不是按钮</span>
                <span>多写的标签会被放置在同一个插槽</span></newtmp>
    </div>

    <!--子组件模板-->
    <template id="tmp">
        <div>
            <h1>我是子组件</h1>
            <h1>接下来我要演示slot的使用</h1>
            <slot></slot>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
            },
            computed: {
            },
            methods: {
            },
            filters: {
            },
            components: {
                newtmp: {
                    template: '#tmp',
                    methods: {

                    },
                    data() {
                        return {
                        }
                    },
                    props: {
                    }
                }
            }
        })
    </script>
</body>

</html>

2.具名插槽的使用

在写slot时顺便写入name属性，在传入指定标签的时候就为传入标签添加slot属性指定需要占领的位置的name属性名，不写的话就会占用name属性值为空的slot占位符。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>

    <!--父组件模板-->
    <div id="jdg">
        <newtmp><span>像这样没有指定名字的slot就会被指派给无名slot</span></newtmp>
        <newtmp><h1 slot="left">name为left的插槽</h1></newtmp>
        <newtmp><h1 slot="center">name为center的插槽</h1></newtmp>
        <newtmp><h1 slot="right">name为right的插槽</h1></newtmp>
    </div>

    <!--子组件模板-->
    <template id="tmp">
        <div>
            <h1>我是子组件</h1>
            <h1>接下来我要演示具名slot的使用</h1>
            <slot name="left"></slot>
            <slot name="center"></slot>
            <slot name="right"></slot>
            <slot></slot>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
            },
            computed: {
            },
            methods: {
            },
            filters: {
            },
            components: {
                newtmp: {
                    template: '#tmp',
                    methods: {

                    },
                    data() {
                        return {
                        }
                    },
                    props: {
                    }
                }
            }
        })
    </script>
</body>

</html>