Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。

后面越来越发现插槽的好用。

分享一下插槽的一些知识吧。

分一下几点:

1、插槽内可以放置什么内容?

2、默认插槽

3、具名插槽

4、作用域插槽

一、插槽内容

  一句话:插槽内可以是任意内容。

   先看一下下面的代码:声明一个child-component组件,

   如果现在我想在<child-component></child-component>内放置一些内容,结果会是怎样?

<div id="app">
<child-component></child-component> </div>
<script>
Vue.component('child-component',{
template:`
<div>Hello,World!</div>
`
})
let vm = new Vue({
el:'#app',
data:{ }
})
</script>

  

<child-component>你好</child-component>

输出内容还是在组件中的内容,在 <child-component>内写的内容没起作用。

这就是插槽出现的作用。

我们现在给组件增加一个<slot></slot>插槽

我们在<child-component></child-component>内写的"你好"起作用了!!!

Vue.component('child-component',{
template:`
<div>
Hello,World!
<slot></slot>
</div>
`
})

到现在,我们知道了什么是插槽:

插槽就是Vue实现的一套内容分发的API,将<slot></slot>元素作为承载分发内容的出口。

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容

就会跑到它这里了!

二、具名插槽

具名插槽,就是给这个插槽起个名字

在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。

然后再<child-component></child-component>内,slot属性对应的内容都会和组件中name一一对应。

而没有名字的,就是默认插槽!!

<div id="app">
<child-component>
<template slot="girl">
漂亮、美丽、购物、逛街
</template>
<template slot="boy">
帅气、才实
</template>
<div>
我是一类人,
我是默认的插槽
</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>
<h4>这个世界不仅有男人和女人</h4> <slot name="girl"></slot> <div style="height:1px;background-color:red;"></div> <slot name="boy"></slot> <div style="height:1px;background-color:red;"></div> <slot></slot>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{ }
})
</script>

三、默认插槽

上面已经介绍过了,这里不做描述

四、作用域插槽

之前一直没搞懂作用域插槽到底是什么!!!

说白了就是我在组件上的属性,可以在组件元素内使用!

先看一个最简单的例子!!

我们给<slot></slot>元素上定义一个属性say(随便定义的!),接下来在使用组件child,然后在template元素上添加属性slot-scope!!随便起个名字a

我们把a打印一下发现是 {"say" : "你好"},也就是slot上面的属性和值组成的键值对!!!

这就是作用域插槽!

我可以把组件上的属性/值,在组件元素上使用!!

<div id="app">
<child>
<template slot-scope="a">
      <!-- {"say":"你好"} -->
{{a}}
</template>
</child>
</div>
<script>
Vue.component('child',{
template:`
<div>
<slot say="你好"></slot>
</div>
`
}) let vm = new Vue({
el:'#app',
data:{ }
})
</script>

再看一下下面的例子:

<div id="app">
<child :lists="nameList">
<template slot-scope="a">
{{a}}
</template>
</child>
</div>
<script>
Vue.component('child',{
props:['lists'],
template:`
<div>
<ul>
<li v-for="list in lists">
<slot :bbbbb="list"></slot>
</li>
</ul>
</div>
`
}) let vm = new Vue({
el:'#app',
data:{
nameList:[
{id:1,name:'孙悟空'},
{id:2,name:'猪八戒'},
{id:3,name:'沙和尚'},
{id:4,name:'唐僧'},
{id:5,name:'小白龙'},
]
}
})
</script>

看一下输出结果

这太有用了兄弟们!!!

这样我就可以在这元素上随便玩了啊!!

当id等于1的时候,我前面加个你好。

我可以随便根据这个对象的属性值进行操作!

<child :lists="nameList">
<template slot-scope="a">
<div v-if='a.bbbbb.id==1'>你好:<span>{{a.bbbbb.name}}</span></div>
<div v-else>{{a.bbbbb.name}}</div>
</template>
</child>

最后!如果用过elementui的同学,一定知道表格就是这样来的!!

表格的本质就是这样!

Vue 插槽详解的更多相关文章

  1. Vue插槽详解 | 什么是插槽?

    作者 | Jeskson 来源 | 达达前端小酒馆 什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分 ...

  2. Vue插槽详解

    简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> < ...

  3. 22. VUE 插槽-详解

    插槽 一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用. (一)插槽内容 先简单来个例子,看一下插槽的租作用. 1.1 不使用插槽 父组件中: <div id="app&q ...

  4. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  5. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  6. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  7. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  8. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. vue实例详解

    Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...

随机推荐

  1. js 插件 issue

    1 iscroll 5 和 lazyload 同时使用  转自 yinjie //lazyload var $scrollEle = $("#wrapper") $("i ...

  2. Scrum立会报告+燃尽图(十一月二十七日总第三十五次):β阶段最后完善

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2415 项目地址:https://git.coding.net/zhang ...

  3. FIsherman丶Team

    小组成员:郝恒杰,洪佳兴,张子祥 组长:郝恒杰 项目:Fisher Job(渔夫兼职) 简介: 我们的产品渔夫兼职是为了解决大学生兼职群体 的痛苦,他们需要一个好的渠道去找一个让自己满意的兼职,但是现 ...

  4. A8

    组员:陈锦谋 今日内容: PS学习.抠图.图标像素调整 明日计划: 继续小组内安排的任务 困难: 无

  5. 《我是一只IT小小鸟》心得

    虽然读这本书是老师布置的作业,但是读了几页后就被书中的内容所吸引住了.或许是因为我也是学这个专业的,所以书中的一些内容让我觉得非常的有兴趣.作为一个学习软件工程的大一学生还没真正的认识到这个专业的深奥 ...

  6. Hive查看执行日志

    HIVE-如何查看执行日志 HIVE既然是运行在hadoop上,最后又被翻译为MapReduce程序,通过yarn来执行.所以我们如果想解决HIVE中出现的错误,需要分成几个过程 HIVE自身翻译成为 ...

  7. mysql中用户和权限

    用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中——不管哪个数据库的用户,都存储在这里. 表初始内容如下: 创建用户: 形式: create   ...

  8. 【C++】C++的构造函数

    构造函数是特殊的成员函数,只要创建类类型的对象,都要执行构造函数.构造函数的工作是保证每个对象的数据成员具有合适的初始值. class Sales_Item { public: //operation ...

  9. Monkey自动化测试

    Monkey简介 语法参数 实际应用 一.Monkey简介 1.什么是Monkey? 基于健壮性.稳定性的考虑:如果将一个应用交给一个人长时间不停地乱点乱按,程序会怎么样? 有时候运行相同系列的测试, ...

  10. 'phantomjs.exe' executable needs to be in PATH. (selenium PhantomJS python)

    今天selenium PhantomJS python用了下,发现报错,提示我:'phantomjs.exe' executable needs to be in PATH. from seleniu ...