Vue学习之插槽

最新推荐文章于 2024-08-21 20:18:11 发布

虞啊鱼

最新推荐文章于 2024-08-21 20:18:11 发布

阅读量108

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_42592879/article/details/108727102

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Vue学习之插槽

文章目录

Vue学习之插槽
一、什么是插槽？
二、插槽的使用
总结

一、什么是插槽？

在使用组件的时候，我们在组件的内部写了子元素，却并不会显示在页面上

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id='app'>
        <my-com>组件内的内容</my-com>
    </div>
    <script>
        let myCom = {
            template: `
            <div>
               一个组件
            </div>
            `
        }
        Vue.component('my-com', myCom)
        new Vue({
            el: '#app',
            data: {},
            methods: {},
        })
    </script>
</body>

</html>

显示效果：
在这里插入图片描述这里并没有显示“组件内的内容”，这是因为没有使用插槽，组件不知道要把“组件内的内容”放在template中的哪个位置。

插槽相当于一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

二、插槽的使用

1.普通插槽

子组件

 Vue.component('my-com', {
            data() {
                return {
                }
            },

            template: `
            <div>    
                <button><slot>默认内容</slot></button>
            </div>
            `

父组件

<my-com>Hello World</my-com>

在子组件内使用<slot></slot>标签，当组件渲染的时候，<slot></slot> 将会被替换为"Hello World"。插槽内可以包含任何模板代码，甚至可以是组件。
这里从函数的角度来理解，slot为形式参数，<my-com></my-com>中的内容就为实参。Slot标签内部的内容为默认值，也就是当调用组件的时候没有设置插槽内容，则组件插槽内容默认为"默认内容"

2.具名插槽

一个组件可以有多个插槽，为了区分几个插槽，需要使用到具名插槽，具名插槽也就是给插槽取名字

子组件：

            <div>    
                <button><slot name="header"> header的内容 </slot></button>
                <button><slot name="default"> content的内容 </slot></button>
                <button><slot name="footer"> footer的内容 </slot></button>
            </div>

父组件：

 <my-com>

            <template v-slot:header>
                父组件header
            </template>
            
            <template v-slot:default>
                父组件content
            </template>

            <template #footer>
                父组件footer
            </template>

        </my-com>

有v-slot:插槽名，#插槽名两种传递方式

3.作用域域插槽

插槽可以传递任何文本或html元素，但仍然有局限性。比如有时会需要用把表格封装为组件，这时候需要用到作用域插槽。

具名插槽和默认插槽其实都是传递的文本，是在html标签中的内容。而作用域插槽，用的是<slot>标签上的属性的数据，这个数据可以是对象和列表。

比如，如果要用一个组件去显示一个列表
父组件：

 		<my-table :data="stus">
            <template #header>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </template>
            <template #body="scope">
                <th>{{scope.item.id}}</th>
                <th>{{scope.item.name}}</th>
                <th>{{scope.item.age}}</th>
            </template>
        </my-table>

子组件：

 Vue.component('my-table', {
            data() {
                return {
					data: [
	                    { id: 1001, name: 'zhangsan', age: 21 },
	                    { id: 1002, name: 'lis', age: 21 },
	                    { id: 1003, name: 'wangwu', age: 21 }
                    ],
                }
            },
            template: `
                <table>
                    <thead>
                        <tr>
                            <slot name="header"></slot>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,index) in data">
                            <slot :item="item" name="body"></slot>
                        </tr>
                     </tbody>
                </table>
            `
        })

这里在渲染的时候，是根具子组件的template为模板，<slot>标签用于占用，然后再父组件中更具插槽的名字找到相应的文本或html代码片段，填充到模板中。
父组件中 #body=scope 将子组件中v-for遍历到的对象给到了父组件，父组件根据对象的数据将内容放到<tr>中，再将这几个<tr>放到子组件模板中。
作用域插槽，实际上就实现了子组件给父组件数据。