Vue 学习08——Vue组件插槽

最新推荐文章于 2022-05-08 17:15:45 发布
最新推荐文章于 2022-05-08 17:15:45 发布
阅读量293 收藏
点赞数
分类专栏： vue 文章标签： Vue组件插槽 Vue定义具名插槽 Vue插槽实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sicily_winner/article/details/103931598
版权

目录

​​㋀㋊

✎ 组件插槽slot（slot ）

◆ 插槽基本概念

◆ 定义一个基础插槽

① demo

② 效果图

◆ 定义一个具名插槽（如果出现多个solt）

① demo

② 效果图

​​㋀㏬

✎  组件插槽slot升级（slot /a.vue）

◆ 前言

        ➬ 考题1：father.vue模板内容<p>123</p>向child.vue子组件如何传递。

        ➬  考题2：father.vue无模板内容向child.vue子组件传递，却显示no sloat.

        ➬  考题3：向child.vue中具名的slot，为header或者footer如何传信息

  • 组件插槽slot（slot /a.html）

  • 插槽基本概念

我们定义组件时，通常会向组件传递一些内容，插槽也就是组件内部预留的分发入口。我们可以在使用组件时传入我们预先定义好的一些内容

  • 定义一个基础插槽

前言：在my-componet的template中，定义了html，里面的div有一个特殊的元素<solt>，在定义组件的时候内部添加solt标记，solt标记就是组件预留的入口，作用当你在网页当中引用这个组件的时候，如果你往组件内部直接写内容，这些内容会替代定义模板当中的solt标记，一个是预留的入口，一个是可以直接替换它。

     

  • demo

<!DOCTYPE html>
<html lang="en">
<hea
最低0.47元/天 解锁文章
winner_corl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue——组件插槽
weixin_43370373的博客
07-22 191
1、组件插槽的作用 父组件向子组件传递内容（模板中的内容） 组件最大的特性就是复用性，插槽能大大提高组件的复用性 提供一个插槽的位置；提供插槽的内容 2、组件插槽的基本用法 1.插槽位置 Vue.component('alert-box',{template:'<div class="demo-alert-box"><strong>炸酱面</strong></div><slot></slot></div>'}) &lt
vue组件插槽
m0_68687804的博客
10-14 248
v-slot: 可以简写为 #slot的name属性起插槽名，使用组件时，template配合#插槽名传入具体的标签。
vue 插槽
weixin_43872629的博客
11-02 85
vue 插槽 父组件中的子组件标签内的内容可以通过slot插槽的方式传给子组件 父组件 <chlid>这是孩子</child> 子组件 <sloat></sloat> sloat里面就是这是孩子 具名插槽 //父组件 <template v-sloat:header> 这是孩子 </template> //子组件 <sloat name='header'></sloat> 插槽里面给父组件传值 子
vue3 开发问题总结
weixin_48366131的博客
09-16 225
‘slot’ attrbutes are deprecated 原因：sloat属性已弃用； // 之前 <structure> <div sloat='header'> // 报错 'slot' attrbutes are deprecated </structure> //vue3 插槽使用 <structure> <template v-sloat='header'> <div sloat='header'&gt
复习Vue14：组件插槽应用
tinglis的博客
03-02 268
复习Vue14：组件插槽应用 14.1、插槽基本使用 生活中的插槽 其实我们生活中有很多很多的插槽，比如电脑的usb插槽，插板中的电源插槽等等。每一个插槽都有他们之间的价值。比如电脑的usb插槽，可以用来插U盘，链接鼠标，链接收集、音响等等，通过这些插槽，大大拓展了原有设备的功能。 组件中的插槽 组件中的插槽，让使用者可以绝对组件内部的一些内容到底展示什么，也就是，插槽可以实现父组件向子组件传递模板内容，具有插槽的组件将会有更加强大的拓展性。 下面看一个实际应用的例子来体会一下插槽的应用场景。 三个页面中
vue中slot的使用
longtengg1的博客
12-27 1421
1、基本使用 在子组件中使用标签定义插槽位置 在父组件的子标签之间填写插槽内容 son组件 <template> <div> <p>床前明月光</p> <slot></slot> </div> </template> father组件 <template> <div> <son>
vue slot插槽使用个人理解
Beamon__的博客
09-21 2767
最近项目不忙，看了看vue，看到了slot，练习了下，与大家分享下，希望有用～   个人理解：用法等同于“占位符”，占据一定的“位置”，进行不同的回显，可以设置默认值，效果类似于v-if，但是功能更丰富   slot用法一（基础用法） 子组件代码设置如下： &lt;template&gt; &lt;div&gt; &lt;slot&gt;默认&lt;/slot...
Vue 组件复用多次自定义参数操作
10-15
此外，Vue组件还支持一种强大的功能——插槽（Slot），用于在组件内部插入自定义内容。插槽允许父组件动态地向子组件传递内容，而无需使用props。例如，我们创建一个`my-blog`组件，它有一个默认插槽，可以插入任意...
浅析vue插槽和作用域插槽的理解
10-17
在Vue中，插槽（slot）机制是实现组件间通信和内容分发的关键特性。本文将深入解析Vue插槽及其扩展形式——作用域插槽。 首先，让我们理解什么是普通插槽。插槽在Vue中是一个预留区域，它允许父组件向子组件注入...
vue3.zip——CompositionAPI
07-14
Vue3引入了Teleport，它允许我们将组件的内容渲染到文档的任意位置，比如在某个特定的DOM元素下，解决了之前插槽和嵌套组件的某些限制。 7. **Fragment和Suspense** Vue3允许创建无根节点的Fragment组件，以及...
VUE组件入门
04-10
### VUE组件入门知识点详解 #### 一、组件概述 - **定义**：在Vue.js中，组件（Component）是一种非常重要的概念，它是Vue.js框架中最强大的功能之一。组件允许开发者将页面分解成独立的、可复用的部分，每个部分都...
vue插槽
01-07
v-slot 为vue插槽指令 1.匿名插槽/默认插槽 只可以使用一次，由父组件提供样式和内容，子组件只负责显示 2.具名插槽 可以使用多次 插槽内容 3.作用域插槽（带数据的插槽） 在slot上面绑定数据 {{集合.值}} 直接...
vue组件详解——使用slot分发内容
weixin_30580341的博客
04-12 96
每天学习一点点 编程PDF电子书、视频教程免费下载：http://www.shitanlife.com/code 一、什么是slot 在使用组件时，我们常常要像这样组合它们： <app> <app-header></app-header> <app-footer></app-footer> <...
四、自定义组件、组件中插槽的用法、父子组件、混入基础
qq_63011146的博客
02-03 869
组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。组件的名称不要跟 原生html元素重名，一般用短横线分隔命名，例如my-component 组件有两种注册方法：1.全局注册 2.局部注册 全局注册: 通过Vue.component()来创建组件： 定义全局组件，让每一个Vue实例都可以使用 Vue.component('my-component', { // ... 选项 ... }) 局部注册：在vue实例中通过components选项创建组件，只能在当前...
VUE学习笔记：插槽详解
杨威的博客
05-08 3755
刚开始看Vue官方文档的时候对插槽不是很理解，其实通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，具有高度的灵活性。 1、使用场景 先来看看插槽的使用场景，否则可能连学习的欲望都没有了。插槽还是很重要的，即使不去定义，也要学会使用。 下面这个图中使用了Vant中的NavBar组件，该组件用于手机端标题展示，默认的组件展示的只有标题和返回按钮，但是在有些情况下，我们可能需要在标题栏中放一个增加或查询按钮，这个时候就需要利用插槽来让用户自己定义区域中的内...
vue 实现tab切换动态加载不同的组件
CatEatApple的专栏
01-02 2743
  使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码： 主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。 &lt;style&gt;    &lt;/style&gt; &l...
element-ui cascader 重置按钮触发清空操作
Sicily_winner的博客
07-13 6981
前言 有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空，但是页面上依旧残留着文字，如下图所示： 当点击重置按钮之后，新版用途文字虽然存在，但是已经和后面的clearable触发之后的结果是一样的！！ 也就是点击重置按钮的结果是我们想要的，但是页面上的文字是我们想要弄掉的。 那么我们的问题就是如何把页面上的文字清空掉！ 因为我这个下拉组件是子..
webpack——多个entry和output配置、js不同文件的指定引用
Sicily_winner的博客
02-09 3440
0、依赖 npm init -y npm install webpack webpack-cli -D npm install html-webpack-plugin -D(作用：用模板生成html，自定引入js文件) 1、在src下新增home.js和other.js 2、新增index.html(./webpack-pages/index.html) 3、webpack配置 v...
Vue 史上最全学习笔记（2020年1月9日）
Sicily_winner的博客
01-11 2781
目录 ✎VUE学习 ◆VUE学习心路历程 ◆VUE学习视频来源 ➀VUE学习视频百度网盘资源 ➁VUE本笔记学习视频资源 ◆VUE语法 ❶ Vue基础语法——模板语法（Three rule of template） ❷ Vue基础语法——创建VUE实例（Create Vue） ❸Vue生命周期（Vue life） ❹Vue组件（Components type） ...
Vue笔记（三）——组件&插槽
最新发布
05-25
在 Vue.js 中，组件可以分为全局组件和局部组件，其中全局组件可在任何地方使用，而局部组件只能在其父组件中使用。 定义组件时，需要使用 Vue.component() 方法，该方法需要传入两个参数：组件名称和组件配置对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值