slot多作用域 vue_一次性讲明白vue插槽slot

最新推荐文章于 2024-04-13 16:32:03 发布
最新推荐文章于 2024-04-13 16:32:03 发布
阅读量191 收藏
点赞数
文章标签： slot多作用域 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39884832/article/details/111715880
版权
本文详细介绍了Vue中的插槽使用，包括默认插槽、具名插槽和作用域插槽。通过示例展示了如何向组件传递模板内容，以及如何在父组件中定制和拓展子组件的功能。插槽是Vue中用于组件内容分发的关键特性，能够提高组件的复用性和灵活性。
摘要由CSDN通过智能技术生成

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

以下文章来自掘金

作者：JH30K

链接：https://juejin.im/post/5ed61cd86fb9a047a43444d6

一、前言

vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容，那插槽是怎么使用的呢？它要解决什么场景的问题呢？

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

注意：以下的所有内容是基于vue版本 2.6.0 起

二、插槽是什么

下面看一个例子

写一个父组件: test.vue

大家好我是父组件

测试一下吧内容写在这里了能否显示

import myslot from './myslot';

export default {

components: {

myslot

}

}

写一个子组件：myslot.vue

我是子组件

运行代码，发现，最终渲染的效果是

大家好我是父组件

我是子组件

那如果我想实现显示父组件中p标签的内容怎么办

修改子组件：myslot.vue

我是子组件

现在测试一下slot

运行代码，可以看到以下效果

大家好我是父组件

我是子组件

现在测试一下slot

测试一下吧内容写在这里了能否显示

官方文档对于插槽的应用场景是这样描述的:

我们经常需要向一个组件传递内容

Vue 自定义的 元素让这变得非常简单

最低0.47元/天 解锁文章
weixin_39884832
关注
Vue3 - slot 插槽（普通插槽 / 具名插槽 / 动态插槽 / 作用域插槽 / 具名作用域插槽）详细使用教程
王佳斌
02-15 3747
Vue3中插槽(slot)用法汇总，Vue3插槽的使用，vue3.x的插槽，vue插槽，Vue3 插槽使用详解，vue3中插槽的使用，Vue3:Slot 插槽，Vue3具名插槽与作用域插槽，插槽内容Vue3的组件，Vue3 插槽使用汇总，Vue3系列教程之插槽slot详解，Vue3中slot插槽使用方式，Vue3 中插槽(slot)的用法，Vue3 插槽slots，vue 中三种插槽的使用，vue3中插槽怎么写，Vue3 - slot 插槽（普通插槽 / 具名插槽 / 动态插槽 / 作用域插槽 / 具名作用
组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
qq_39368007的博客
04-16 289
组件插槽的作用 组件插槽：父组件向子组件传递内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
微信号：RunsenLiu
10-18 2374
写在前面：我是「Runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
vue父子组件、兄弟组件之间的传值通信
WanFengZhou
05-31 1190
一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用props来显示的声明父组件传递的属性，例如： 子组件： <!--这是子组件 child.vue --> <template> <div class="not-found"> {{ message }} </div> </template> <script> props: ['message'], export default {
【Vue实用组件】插槽作用域
時陨星的博客
07-23 315
【Vue实用组件：插槽作用域】可向插入的元素内传递包装好的局部变量，相当于模板内的实时计算属性，用以简化引用嵌套较深的属性，相较于 computed 计算属性更灵活。
vue.js从入门到深入再到随心而用——————vue.js中的（组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法）
01-08
(这篇小总结主要总结了veu中组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法) 1.组件 定义： 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 1.1组件的基本使用 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 代码： // 注册组件 // 1、 my-component 就是组件中自定义的标签名 Vue.component('my-component', { template: ' A cu
Vue作用域插槽slot-scope实例代码
10-18
Vue.js框架提供了灵活的组件通信和复用机制，其中一个非常有用的功能是作用域插槽（scoped slots）。作用域插槽能够让我们在父组件中访问到子组件的数据，并按照父组件的逻辑来渲染这些数据。下面，我们就通过实例...
Vue作用域插槽实现方法及作用详解
10-15
Vue作用域插槽是Vue.js框架中一种高级特性，允许父组件访问子组件中定义的数据。在本文中，我们将深入探讨作用域插槽的实现方法及其在实际开发中的应用。 首先，我们需要了解Vue中的插槽（slot）的概念。在Vue中，...
vue组件间的传值（父子、子父、兄弟、后代、非兄弟）
陈同学的博客
04-10 2453
目录 父向子传值 子向父传值 兄弟传值 后代传值 非兄弟传值 在解决组件通讯方面，比较好用的就是vuex，但是在小型的项目中使用vuex就会有点大材小用的感觉，而且会增加文件体积。以下的都是不用vuex的传值解决方法，本文着重点是 后代的传值 和 非兄弟的传值，一些基本的操作就粗略带过。。。 好的，进入正题 现在假设 App.vue 下有两个子组件 brother.vue 和...
作用域插槽
huataoblog
11-12 449
父组件展示子组件不同的插槽，并从子组件中获取数据 <div id="app"> <cpn></cpn> <!-- 展示默认插槽和元素 --> <cpn> <!-- 展示不同插槽,数据从子组件中获得 --> <div slot-scope="slot" slot=...
vue slot 插槽里面传递事件 调用外层的函数
qq_45279574的博客
04-06 2635
vue开发过程中会有很多相似的页面开发，所以我们就想着用插槽的办法 写一个模版组件 在组件文件夹下新建文件 我命名为vSlot 组件里面定义一个具名插槽 名字为head 这里捆绑了2个属性 data 跟done 其中done 是个方法 <template> <div class="hello"> <slot name="head" :data="testData" :done="done"></slot> </div> &lt
slot传函数 vue_vue中的插槽slot理解
weixin_28966407的博客
12-24 456
本篇文章参考赛冷思的个人博客1.函数默认传参在我们写js函数我们的可能会给他们一个默认的参数，写法是functionshow(age,name){var age = age || 20;var name = name ||张三;console.log(age,name);}show();//20,张三show(18,"命名") //18,明明如果用户不传入参数，那么会输出默认值，如果用户传入，会输...
Vue开发技巧总结（三）自定义事件、长列表性能优化、函数式组件、作用域插槽
yw00yw的博客
07-10 348
自定义事件及事件总线 父子组件自定义事件 子组件：this.$emit("my-event") 发送事件 父组件：<dialog-component @dialog-closed="eventHandler" /> 监听事件 事件总线 可以将事件发送到同级、祖父母、层次结构中的任何其他组件 为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。 eventBus.js： // 首先，在新的模块文件中创建并导出Vue实例： imp
插槽的三种写法---可传值
m0_46512929的博客
10-28 1613
##插槽 1.说明：Vue实现了一套内容分发的API,定义时不知道具体要显示什么，只是留出来显示的位置，在组件调用时写具体内容，能展现在预留的位置上。 2.定义：使用标签预留位置 3.调用组件时，写具体的要呈现的内容，要显示在标签中 1.匿名插槽 <slot></slot> <slotname='default'></slot> //相当于有默认名字 2.具名插槽 // 定义语法： <slotna...
Vue组件传参---兄弟组件传参（非父子组件传参）
旭哥的博客
05-16 604
方案一（最简单兄弟组件传参解决方案）： 原理：使用一个空的 Vue 实例作为“中转站”，进行发送和接收数据。 1、在main.js中添加 new一个空的Vue实例，并将其挂载在原型上 Vue.prototype.bus=new Vue(); 2、ComponentA组件中 <template> <div class="wrapper"> <h3>这里是组件A</h3> <button @click="sendData"&gt
vue学习笔记——插槽、自定义事件
qq_29384339的博客
08-03 576
插槽slot Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
Vue 中，如何将函数作为 props 传递给组件
热门推荐
粉丝们务必加入微信粉丝群
05-11 4万+
Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?虽然可以将函数作为props传递，但这种方式不好。相反，...
【vue】作用域插槽（子组件向父组件传数据）
最新发布
m0_63070489的博客
04-13 539
【vue】作用域插槽（子组件向父组件传数据）
Vue作用域插槽slot-scope深度解析与实例
"Vue作用域插槽slot-scope的实例代码和应用场景解析" Vue.js 是一款流行的前端框架，它提供了一种强大的方式来实现组件间的交互和内容重用，其中插槽（slots）机制是一个关键特性。插槽允许我们在组件内部定义可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值