Vue组件开发之插槽

最新推荐文章于 2024-03-08 16:26:19 发布
最新推荐文章于 2024-03-08 16:26:19 发布
阅读量172 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42707967/article/details/115880353
版权
一.Vue组件开发中插槽
1.1 插槽的作用

插槽的作用是为了拓展组件的灵活性，因为我们定义组件时，组件中的内容基本被固定，所以在组件中预备插槽时可以拓展组件的功能，在引用组件时可以修改组件内容的显示

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <span>root组件中的内容</span>
            <component1>
                <div>
                    <span>这是插槽的内容111</span>
                </div>
            </component1>
            <component1>
                <div>
                    <span>这是插槽的内容2222</span>
                </div>
            </component1>
        </div>

        <template id="content">
            <div>
                <slot></slot>
            </div>
        </template>

        <script>
            const vm = new Vue({
                el:"#app",
                data:{
                    message: 'hello',
                },
                methods:{
                },
                components:{
                    component1:{
                        template: '#content',
                        data(){
                            return {name: 'Jack'}
                        },
                        methods:{
                            btnclick(){
                                console.log("打印component1组件中的showMessage函数");
                            }
                        },
                    }
                }
            })
        </script>
    </body>
</html>
1.2 具名插槽

具名插槽就是带名称的插槽，就是为了修改指定插槽中值的内容

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <span>root组件中的内容</span>
            <component1>
                <div slot='left'>
                    <span>这是插槽的内容left</span>
                </div>
                <div slot='center'>
                    <span>这是插槽的内容left</span>
                </div>
            </component1>

            
        </div>

        <template id="content">
            <div>
                <slot name="left"></slot>
                <slot name="center"></slot>
                <slot name="right"><span>default</span></slot>
            </div>
        </template>

        <script>
            const vm = new Vue({
                el:"#app",
                data:{
                    message: 'hello',
                },
                methods:{
                },
                components:{
                    component1:{
                        template: '#content',
                        data(){
                            return {name: 'Jack'}
                        },
                        methods:{
                            btnclick(){
                                console.log("打印component1组件中的showMessage函数");
                            }
                        },
                    }
                }
            })
        </script>
    </body>
</html>

通过name来为插槽定义名称，然后在组件使用处使用slot=‘name’来为指定插槽进行替换

1.3 作用域插槽

作用域插槽的实质指的时，父组件中对插槽进行替换，但是渲染的数据来自子插槽

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <span>root组件中的内容</span>
            <component1>
                <template slot-scope="slot">
                    <div>
                        <span v-for="item in slot.data">{{ item }} * </span>
                        <br>
                        <span>{{ slot.data.join(' - ') }}</span>
                    </div>
                    
                </template>
            </component1>

            
        </div>

        <template id="content">
            <div>
                <slot :data='PLanguage'></slot>
            </div>
        </template>

        <script>
            const vm = new Vue({
                el:"#app",
                data:{
                    message: 'hello',
                },
                methods:{
                },
                components:{
                    component1:{
                        template: '#content',
                        data(){
                            return {PLanguage: ['javascript', 'java', 'python', 'script']}
                        },
                        methods:{
                            btnclick(){
                                console.log("打印component1组件中的showMessage函数");
                            }
                        },
                    }
                }
            })
        </script>
    </body>
</html>
父子组件访问
root组件中的内容
{{ item }} *
{{ slot.data.join(' - ') }} 
            </template>
        </component1>

        
    </div>

    <template id="content">
        <div>
            <slot :data='PLanguage'></slot>
        </div>
    </template>

    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                message: 'hello',
            },
            methods:{
            },
            components:{
                component1:{
                    template: '#content',
                    data(){
                        return {PLanguage: ['javascript', 'java', 'python', 'script']}
                    },
                    methods:{
                        btnclick(){
                            console.log("打印component1组件中的showMessage函数");
                        }
                    },
                }
            }
        })
    </script>
</body>
bugsayend
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件的插槽
weixin_61562639的博客
08-13 560
父组件模板的所有东西都会在父级作用域内编译； 子组件模板的所有东西都会在子级作用域内编译
VUE slot 插槽失效、不起作用 、 显示失败问题解决
热门推荐
NDSC_L的博客
11-07 2万+
VUE slot 插槽失效、不起作用 、 显示失败问题解决 被 slot 插槽问题折磨了一晚上，一下为总结 **主要分三种： 1、slot 写成了 solt 2、使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称，具体解决方法如下 https://blog.csdn.net/weixin_46704556/article/details/118638344 3、slot 里面的name属性不能有大写字母，全改成小写即可** <div i
Vue3项目中slot插槽不起作用（解决方法）
qq_41988113的博客
04-26 1万+
问题：在子组件中定义一个具名插槽，在父组件中使用，但是内容并不能渲染出来。 原因：Vue在2.6.0,版本更新了有关插槽的大量内容,具名插槽和作用域插槽引入了一个新的语法v-slot来取代slot和slot-scope这两个已废弃但未移除的属性。所以使用原来的写法内容不能被渲染出来。 修改：使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称 原来的写法： //子组件 <template> <div class="tab-
Vue插槽
qq_41965819的博客
04-10 328
Vue插槽 插槽（Slot）是 vue 为组件的封装者提供的能力 允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。 插槽作用: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容 插槽：slot 作用：占位符 默认插槽 只要没有具体分发的内容, 都会给到默认插槽 <slot name="default"></slot> 是默认插槽完整的写法 和 <slot></slot> 完全等价 示例如下： <my-
今天扒一扒vue插槽slot的一些事，主治插槽不起作用，等问题
Michael_Hzs的博客
03-30 1183
​ 前两天查了插槽的相关资料，发现大部分csdn或者百度的文章都是把官网的一些例子直接复制粘贴过来，来蹭流量。而对我们真正需要解决问题的起不到任何一些作用。当前 其中还是有一些不错的文章的。也不能说全部都是那种照搬。此文章仅用作自己与那些和我朋友一样问题的人做个记录。官方定义：< slot > 元素作为承载分发内容的出口。个人理解：就是在组件中预留了一块地方（使用
vue3 不使用template,只使用h函数和defineComponent定义插槽slot的方法和bug
最新发布
qq_45756468的博客
03-08 1210
vue3 不使用template,只使用h函数和defineComponent 定义slot的方法和bug。
Vue组件开发技巧总结
08-27
Vue 组件开发技巧总结 本篇文章将对 Vue 组件开发的相关技巧进行总结，通过代码示例详细分析了 Vue 组件开发的相关知识点。 单文件组件开发 在使用 Vue-cli 初始化一个项目时，会发现 src/components 文件夹下有...
Vue组件开发初探
08-31
在Vue组件开发中，主要有以下几个关键知识点： 1. **组件注册**： - **全局注册**：通过`Vue.component()`全局注册一个组件，使得该组件在整个应用中都能被使用。例如： ```javascript Vue.component('my-...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
Vue 组件复用多次自定义参数操作
10-15
总结，Vue组件的复用和自定义参数操作是提高开发效率的关键。通过合理地利用props传递数据，以及插槽插入自定义内容，我们可以构建出高度可复用的组件库。同时，通过函数式参数传递，我们可以灵活处理组件实例间的...
vue插槽slot的简单理解与用法实例分析
10-15
Vue.js 是一款流行的前端JavaScript框架，它的核心特性之一就是组件化。在组件化开发中，有时我们需要在组件...在实际开发中，灵活运用插槽可以极大地提高组件的复用性和代码的可读性，是每个Vue开发者必备的技能之一。
关于Vue中的插槽问题
602bsuperleo的博客
08-11 3249
插槽 关于插槽的话个人理解就是在父组件中引用子组件的同时，可以对子组件的一些内容进行修改或者补充，光这么说可能不大明白，下面就来演示一下插槽的用法。 1.默认插槽 一般情况下如果子组件内只需要插入或修改一条内容的话，只要在其内部写入一个slot元素就可以了，不需要为其命名，这就是默认的插槽，在父组件中编写的内容都会在这个插槽中出现，如果slot元素中有默认内容会被父组件中传来的内容覆盖，...
插槽的作用(作用域插槽)
weixin_44423378的博客
02-22 1229
作用：让父组件可以向子组件指定位置插入html结构 也是一种组件间通信的方式 适用于 父组件传子组件 2.分类:默认插槽 具名插槽 作用域插槽 3.使用方式: (1)默认插槽: 父组件中:<子组件名称><div>结构1</div> 子组件中:<template><div><slot>插槽内容</slot></div> (2)具名插槽 父组件中:<子组件名称> &l
组件中插槽的介绍与使用
道阻且长
08-13 1143
组件中插槽的介绍与使用
vue slot插槽v-show不能控制显示隐藏
banglei123的博客
03-04 2951
slot本质上并不是一个元素，所以也就没有display 这个css属性。而v-show是通过控制元素的display来进行显示隐藏的，所以vue中想控制插槽的显示隐藏，用v-show是不起任何作用的，改用v-if 可以生效。 ...
组件化开发中的常用的插槽(slot)元素
qq_43799743的博客
10-11 467
插槽官方文档
Vue框架之组件插槽
宅羽的博客
01-20 592
◆ 匿名插槽： <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <al...
Vue实战小案例
qq_42707967的博客
04-17 1935
一.表格数据添加，删除，搜索功能 第一个小案例我们模拟购物车效果，实现表格中数据添加，删除，以及搜索功能，废话不多说，直接上代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewpot" content="width=device-width, initial-scale=1.0">
Vue组件化：插槽Slot与非父子通信详解
在Vue组件化开发中，"08_组件化-插槽Slot和非父子通信.pptx"文档详细介绍了组件化设计的关键特性——插槽（Slot）以及非父子组件间的通信机制。插槽是Vue.js提供的一种强大工具，用于增强组件的灵活性和重用性，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值