组件插槽

最新推荐文章于 2024-05-08 01:31:11 发布

一个想走出去的码农

最新推荐文章于 2024-05-08 01:31:11 发布

阅读量475

点赞数

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

本文链接：https://blog.csdn.net/weixin_51811318/article/details/116425269

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

组件插槽

1. 插槽基本使用

1.1理解：

插槽，就是用于占位，等待的父组件的内部内容插入进来
插槽位置

1.2步骤详细描述

①定义组件的时候，在template模板中留一个位置，插槽：
②使用组件的时候，在组件中间，填写内容（这个内容，会传递到slot中）

1.3案例如下

插槽图

<body>
    <div id="app">
        <menu-item>有bug发生</menu-item>
        <menu-item>有一个警告</menu-item>
        <menu-item></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            data: function () {
                return {

                }
            },
            template:
                `
    <div>
        <div>error:</div>
        <slot>默认内容</slot>
    </div>
    `
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

2. 具名插槽

2.1介绍

具名插槽
2.2实例如下

<body>
    <div id="app">
        <menu-item>
            <p slot="header">头部</p>
            <p>1</p>
            <p>2</p>
            <p slot="footer">尾部</p>
        </menu-item>
        <menu-item>
            <template slot="header">
                <p>标题信息1</p>
                <p>标题信息2</p>
            </template>
            <p>1</p>
            <p>2</p>
            <template slot="footer">
                <p>底部信息1</p>
                <p>底部信息2</p>
            </template>
        </menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            data: function () {
                return {

                }
            },
            template:
                `
    <div>
        <slot name='header'></slot>
      
        <slot >默认</slot>
        <slot name='footer'></slot>  
    </div>  
    `
        })
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

3. 作用域插槽 ***

3.1语法

插槽定义
插槽内容
3.2示例
作用域插槽：是将父组件的template标签内容，插入到插槽slot中
在这里插入图片描述

    <style>
        .current{
            color: aqua;
        }
    </style>
<body>
    <div id="app">
        <menu-item :list='list'>
            <template slot-scope='slotProps'>
                <strong v-if='slotProps.item.id==2' class='current'>
                    {{slotProps.item.name}}
                </strong>
                <strong v-else>
                    {{slotProps.item.name}}
                </strong>
            </template>
        </menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['list'],
            //  <slot></slot>里要放需要显示的内容
            template:
                `
            <div> 
                <ul>
                 <li :key='item.id' v-for='item in list'>
                    <slot v-bind:item="item">
                        {{item.name}}
                    </slot>
                 </li>   
                </ul>
                </div>   
            `,
        });
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        name: 'apple'
                    },
                    {
                        id: 2,
                        name: 'orange'
                    },
                    {
                        id: 3,
                        name: 'banana'
                    }
                ]
            }
        })
    </script>
</body>

一个想走出去的码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件插槽

组件插槽1. 插槽基本使用1.1理解：插槽，就是用于占位，等待的父组件的内部内容插入进来1.2步骤详细描述①定义组件的时候，在template模板中留一个位置，插槽：②使用组件的时候，在组件中间，填写内容（这个内容，会传递到slot中）1.3案例如下<body> <div id="app"> <menu-item>有bug发生</menu-item> <menu-item>有一个警告&lt
复制链接

扫一扫