slot学习(采用vue2代码展示)

已于 2023-11-01 17:08:14 修改
阅读量1.2k 收藏 3
点赞数 2
文章标签： 学习 vue.js 前端
于 2022-05-05 23:06:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hujian66/article/details/124599695
版权

插槽概念

  • 插槽(slot)是vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.
  • 插槽显不显示,怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制.
  • 父组件拥有结构,子组件用slot占位.
  • 作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的问题.

(1) 默认插槽

父组件(radio.vue):
在父组件引用的子组件中写入想要显示的内容(可以使用标签,也可以不用)
在这里插入图片描述
子组件(radioChild.vue):
在子组件中写入slot,slot所在的位置就是父组件要显示的内容.
在这里插入图片描述
页面显示如下:
在这里插入图片描述

(2) 具名插槽

子组件:
在子组件中定义了三个slot标签,其中有两个分别添加了name属性header和footer.
在这里插入图片描述
父组件:
在父组件中使用template并写入对应的slot值来指定该内容在子组件中显示的位置(当然也不用必须写template),没有对应值得其他内容会被放到子组件中没有添加name属性的slot中.
在这里插入图片描述
页面显示如下:
在这里插入图片描述

(3) 插槽的默认内容

父组件:
在这里插入图片描述
子组件:
可以在子组件的slot标签中写入内容,当父组件没有写入内容时会显示子组件的默认内容.当父组件写入内容时,会替换子组件的默认内容.
在这里插入图片描述
页面显示如下:
在这里插入图片描述

(4) 编译作用域

父组件:
在这里插入图片描述
子组件:
在这里插入图片描述
页面显示如下:
在这里插入图片描述

(5) 作用域插槽

作用域插槽是一种子传父的传参方式,解决了普通slot在parent中无法访问child数据的问题.
子组件:
在子组件的slot标签上绑定需要的值.
在这里插入图片描述
父组件:
在父组件上使用slot-scope属性,user.data就是子组件传过来的值.
在这里插入图片描述
页面显示如下:
在这里插入图片描述

hujian66
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue的slot传参
Wehter的博客
03-02 1464
Vue的slot传参
vue2的slot插槽
qq_43203949的博客
12-18 3306
vue的slot插槽 1.定义插槽 插槽使用slot标签来标识，并且插槽是放在组件的template模板里面的，vue允许向组件传递模板。Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。 定义模板 <!--假设这个组件叫my-com--> <!--组件模板如下：--> <template> <div> <p>------------
vue如何使用slot
最新发布
BradenHan的专栏
06-10 736
Vue 中使用 slot 的方式取决于你是使用 Vue 2 还是 Vue 3，因为这两个版本在插槽（Slot）的语法上有所不同。下面是两个版本的基本使用方法：在 Vue 2 中， 是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。Vue 2 提供了几种类型的 slots，包括默认插槽、具名插槽以及作用域插槽。以下是它们的基本使用方法：默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。父组件使用： 子组件定义： 1
Vue2中插槽的使用
djsjsjjswj的博客
07-11 2561
定义slot 插槽的同时 是可以传值的 给插槽上可以绑定数据，将来使用组件可以用。<slot :id="item.id" msg="测试文本"></slot>通过插槽完成了任何内容的定制，传什么显示什么，如果不传，则是空白。封装组件时，可以预留<slot> 插槽提供后备内容（默认内容）插槽只有俩种，作用域插槽不属于插槽的一种分类。外部使用了组件，不传东西，则slot会显示后备内容。在<slot>标签内，放置内容，作为默认显示内容。外部使用组件时，传东西了，则slot整体会被换掉。
vue slot插槽——vue2、vue3默认插槽、具名插槽使用
扶摇的博客
03-24 3782
不管是vue2还是vue3的插槽，他们都分为两种：默认插槽和具名插槽。 插槽的优点就是，只需要摆放正确插槽出口的位置（样式调整好），定义插槽内容的顺序在组件中可以随意，但是同名的插槽内容总是会覆盖上一个插槽内容(vue2中)。 什么是默认插槽？什么是具名插槽？ slot标签不指定name属性的时候就是默认插槽，反之就是具名插槽。在定义插槽内容的时候，所有不指定插槽名称的内容，都会被输出到默认插槽的位置，反之也是一样。 vue2中插槽内容定义：在vue2.6.0之后，使用 v-slot或者语法糖#
Vue-EventBus
WFL804203164的博客
01-04 337
定义 全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上。 //main.js(可以是任意JS写) //方式一 Vue.prototype.$EventBus = new Vue(); // 在mian中，方式一可以这么写 new Vue({ router, render: h => h(App), beforeCreated() { Vue.prototype.$EventBus = this } }).$mount('#app')
Vue 组件利用Slot插件作用域的参数传递
rocklee的专栏
07-16 5488
下面我做个例子，比如我的组件里面的查询栏里面开了一个插槽，希望调用方引用我这组件时可以增加状态查询的输入，并且将查询参数queryParam传过去...
vue案例代码 vue案例代码
11-22
9. **插槽机制**：Vue的插槽（slot）功能允许组件间进行内容分发，提高代码复用性。默认插槽和具名插槽是两种常见的用法。 10. **指令和过渡效果**：Vue提供了多种内置指令，如`v-show`（条件展示元素）、`v-cloak`...
vue仿门户网站代码（纯前端）
11-07
"vue仿门户网站代码（纯前端）"项目是基于Vue.js实现的一个模拟门户网站的前端代码，旨在为学生提供一个学习和交流的平台。这个项目并未涉及后端开发，因此所有的交互和数据都是在客户端进行处理。 1. **Vue.js**: ...
Vue核心知识点讲义.zip
06-05
1. **数据绑定**：Vue采用双向数据绑定，通过`v-model`指令连接视图与模型。当视图中的数据变化时，模型会自动更新；反之，模型的改变也会实时反映到视图上。 2. **组件化**：Vue的核心特性之一是组件系统。组件...
vue案例练习
08-10
- **数据绑定**：Vue采用双向数据绑定，数据和视图之间始终保持同步。 - **指令**：Vue提供了多种指令，如`v-if`、`v-for`、`v-bind`、`v-on`，它们用于处理特定的DOM操作。 - **组件化**：Vue的核心思想之一是...
rendu-vue
03-12
综上所述，"rendu-vue"项目通过实际案例展示了Vue.js的强大特性和使用方法，涵盖了Vue的基础知识和高级应用，是学习和实践Vue.js的宝贵资源。通过分析和运行这个项目，开发者可以更深入地理解Vue.js的工作原理，提升...
vue3和vue2插槽slot的使用
学思QAQ的博客
07-03 766
slot插槽
Vue2基础篇-36-插槽(slot)
Alan0517
12-10 2170
插槽(slot)
Vue2基础- slot 插槽使用（包括动态插槽示例）
龙衣
12-19 9001
插槽使用，包括动态插槽
Vue2：slot插槽的三种用法
Brave_heart4pzj的博客
02-01 1169
Vue
vue2知识点：组件插槽分发
刘大猫
05-26 1397
文章目录3.14插槽分发3.14.1slot插槽举例3.14.2具名插槽举例3.14.3作用域插槽slot-scope3.14.4slot-scope版本更新 3.14插槽分发 父子组件使用时,有时需要将父元素的模板跟子元素模板进行混合,这时就要用到slot插槽进行内容分发, 简单理解就是在子模板定义中先占个位置等待父组件调用时进行模板插入。 3.14.1slot插槽 注意：在子组件模板定义中使用<slot>标签定义插槽位置，标签中可以填写内容，当父组件调用子组件且不传入内容时显示此<s.
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
希望每天都能进步一点点
06-23 1295
Vue学习笔记（三）Vue2四种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
vue中solt插槽如何实现子组件传参给父组件
m0_45884629的博客
02-23 1675
vue中利用solt插槽实现子组件给父组件传递参数
vue2代码改vue3
07-22
要将Vue 2的代码迁移到Vue 3，需要进行一些必要的更改。下面是一些常见的更改和注意事项： 1. Composition API：Vue 3引入了Composition API，它提供了一种新的组织组件逻辑的方式。将Vue 2的Options API转换为Composition API是一个常见的更改。可以使用`setup()`函数来替代Vue 2中的`created()`和其他生命周期钩子函数。 2. 选项名称更改：Vue 3对一些选项名称进行了更改。例如，`beforeCreate`更名为`beforeSetup`，`beforeMount`更名为`beforeMounting`等。需要更新这些选项的名称。 3. 全局API更改：一些全局API在Vue 3中发生了更改。例如，`Vue.component()`现在使用`app.component()`，`Vue.directive()`现在使用`app.directive()`等。 4. 弃用的功能：一些在Vue 2中存在但在Vue 3中已被弃用的功能需要进行修改或替换。例如，`filters`已被移除，可以使用计算属性代替。 5. V-model修饰符更改：在Vue 3中，V-model修饰符的行为有所变化。例如，`.lazy`修饰符已被移除，可以使用`v-model:value`和`v-on:change`来代替。 6. 插槽语法更改：Vue 3中的插槽语法也有所变化。使用`v-slot`代替Vue 2中的`slot`，并且插槽内容需要使用`<template>`标签包裹。 这些是一些常见的更改和注意事项，具体的代码迁移可能会因项目而异。在迁移代码之前，建议先阅读Vue 3的文档和迁移指南，了解更多详细信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值