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


Posted in Javascript onApril 03, 2019

前言

Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。

一、个人理解及插槽的使用场景

刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑。既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将<slot></slot>元素作为承载分发内容的出口;

二、用于理解的例子

目前还没接触到使用插槽解决实际问题很好的例子,只能这样去为了理解插槽而用,可能并没有很好的利用到插槽的好处。

在父组件定义想要传入子组件作为插槽的内容,App.vue

<template>
 <div id="app">
 <div>
 <input type="text" v-model="info">
 <button @click="handleClick">添加</button>
 </div>
 <todolist v-for="item in list" :key="item" :message="msg">
 <template v-slot:item="itemProps" >
 <!-- tips1:<span>即为插槽内容



tips2:item是插槽的名字,为具名插槽,可对应插入到子组件中具体的插槽位置
  tips3:itemProps可以获取到子组件(即插槽 prop)传出来的状态(值),
 
 插槽 prop 的对象命名为 itemProps,可任意命名,itemProps变量存在于 <template> 作用域中
  -->
 <span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span>
 </template>
 </todolist>
 </div>
</template>

<script>

 import todolist from './components/todolist.vue';
export default {
 name: 'App',
 components: {
 todolist
 },
 data(){
 return {
 msg: '4-2-05',
 info: '',
 list: [],
 }
 },
 methods: {
 handleClick() {
 // 获取到input输入的东西,然后加入到数组中
 this.list.push(this.info);
 this.info = ''
 }
 },
}
</script>

<style>
</style>

在子组件利用<slot></slot>元素作为承载分发内容的出口,父组件的插槽内容将在其中显示,todolist.vue

<template>
 <div>
 {{message}}
 <li class="item">
 <input type="checkbox" v-model="checked">
 <slot name="item" v-bind="{checked}" ></slot>
 <!--插槽内容能够访问子组件中才有的数据是很有用的,又因为父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的
 所以得想办法获取到子组件的数据。-->
 <!--给子组件绑定一个动态参数,checked作为一个 <slot> 元素的特性绑定上去,绑定在 <slot> 元素上的特性被称为插槽 prop-->
 </li>
 </div>
</template>

<script>
 export default {
 props: ['item','message'],
 // 因为父组件在插槽内容里使用item, 即此句代码<span>{{item}}</span>
 // 相当于需要传递给子组件的内容,也就是通常的父子组件通信,所以在子组件需要通过props来获取
 data() {
  return {
  checked: false,
  }
 },
 created() {
  console.log(this.message);
 }
 }
</script>

<style scoped>
 .item {
 color: red;
 }
 li{
 list-style: none;
 }
</style>

三、具体知识点

1、具名插槽

上面的例子只使用了一个slot插槽,但有时我们在一个组件里可能会多处使用插槽,我们希望在不同的插槽处插入不同的内容,此时便需要进行区分,<slot> 元素有一个特殊的特性:name。这个特性可以用来定义插槽的名字,在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用

 v-slot 指令,并以 v-slot 的参数的形式写出插槽的名称,使其一一对应。

<slot name="header"></slot>
 <slot name="content"></slot>
 <slot ></slot>
//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

2、作用域插槽

为了使父组件的插槽内容可以使用子组件的数据,可以在 <slot> 元素上绑定想要传递的数据,此特性被称为插槽 prop。同时在父级作用域中,给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,便可获取到。但此内容只在 <template>作用域内可用。

四、自 2.6.0 起有所更新的语法变化

1、带有slot特性的具名插槽

2、带有slot-scope特性的作用域插槽

五、突发奇想的调换

因为看到一个别人写的关于slot的帖子,他应该是写错了插槽在子父组件的内容,这也就相当于从子组件传一个插槽内容给父组件。仔细想想这思路有问题,既然都引用了子组件,父组件便可以访问到子组件的所有内容,现在却非要通过插槽来传递,多此一举。

然后我就试了一下将插槽内容卸载子组件里,果然出现了报错,如下:

  - <template v-slot> can only appear at the root level inside the receiving the component(slot的只能出现在接受组件的根级别)

也就是只能在父组件使用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
react写一个select组件的实现代码
Apr 03 #Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 #Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 #Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 #Javascript
elementUI多选框反选的实现代码
Apr 03 #Javascript
vue生命周期的探索
Apr 03 #Javascript
You might like
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详细分析单线程JS执行问题
2017/11/22 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
安全标准化实施方案
2014/02/20 职场文书
环境科学专业求职信
2014/08/04 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
员工工作表现自我评价
2015/03/06 职场文书
特此通知格式
2015/04/27 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers