Vue中插槽slot的使用方法与应用场景详析

什么是插槽?

我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。

可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+;

插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope

匿名插槽

匿名插槽,我们也可以叫它单个插槽或者默认插槽。和具名插槽相对,它是不需要设置 name 属性的,它隐藏的name属性为default。

father.vue

child.vue

匿名插槽,name的属性对应的是 default 也可以不写就是默认的意思啦;

在使用的时候还有一个问题要注意的 如果是有2个以上的匿名插槽是会child标签里面的内容全部都替换到每个slot;

具名插槽 (vue2.6.0+被废弃的slot='name')

顾名思义就是slot 是带有name的 ,定义:  或者使用简单缩写的定义 #header 使用:要用一个 template标签包裹

father.vue

child.vue

这里说一下多个具名插槽的使用 多个具名插槽,插槽的位置不是使用插槽的位置而定的,是在定义的时候的位置来替换的

father.vue

child.vue

作用域插槽

就是用来传递数据的插槽

当你想在一个插槽中使用数据时,要注意一个问题作用域的问题,Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的;

为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去: v-bind:text="text"

注意:

匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写,具名的相反要写的是对应的name))

v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"

效果图

总结

到此这篇关于Vue中插槽slot的使用方法与应用场景的文章就介绍到这了,更多相关Vue插槽slot用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-06-07

详解vue2.6插槽更新v-slot用法总结

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性.新语法的由来可查阅 RFC. 引vue官方文档 之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~ 插槽 我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽) 插槽分类 插槽一共就三大类 1.匿名

vue插槽slot的简单理解与用法实例分析

本文实例讲述了vue插槽slot的简单理解与用法.分享给大家供大家参考,具体如下: vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结. 从字面理解插槽是预先插入一个代码空间,用于后期塞入数据. 插槽分类 匿名插槽     ------------------   匿名的代码空间 具名插槽     ------------------   带有命名的代码空间 作用域插槽 -------------------   带有数据的代码空间 插槽使用示例 匿名插槽 说明在组件中先定义预留的代码空

详解vue使用插槽分发内容slot的用法

将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div> </son-tmp> 单个插槽 父组件app.vue <template> <div id="app"> <test-slot> <span>我是父组件里的文字,但是我要被放到子组件里</span> </t

vue中的 $slot 获取插槽的节点实例

vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo

使用react context 实现vue插槽slot功能

首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n

vue中slot(插槽)的介绍与使用

什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot 原理 在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom. <slot> 元素 Shado

vue插槽slot的理解和使用方法

前言 Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替.根据slot的应用场景可以分为匿名slot和具名slot. 一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是"父组件向子组件传递dom时会用到插槽",这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去

Vue作用域插槽slot-scope实例代码

vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot

详解vue slot插槽的使用方法

官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"><

Vue中的slot使用插槽分发内容的方法

本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

本文实例讲述了vue 使用插槽分发内容操作.分享给大家供大家参考,具体如下: 单个插槽 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 例: <!DOCTYPE html> &

深入理解vue中的slot与slot-scope

写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生"算了吧,回头再学,反正已经可以写基础组件了",于是就关闭了vue说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这个部分也是按照vue说明文档的顺序来写的. 进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板

Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

vue中element组件样式修改无效的解决方法

如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

Vue 中使用vue2-highcharts实现曲线数据展示的方法

1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l

使用vue中的v-for遍历二维数组的方法

如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

vue中进入详情页记住滚动位置的方法(keep-alive)

> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <