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


Posted in Javascript onMarch 09, 2019

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。

引vue官方文档

之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~

插槽

我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽)

插槽分类

插槽一共就三大类
1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2.具名插槽: 相对匿名插槽组件slot标签带name命名的
3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(也叫默认插槽default)

用法:我的理解,匿名插糟只需要一个.(就是这些,不太复杂)

父页面:

<todo-list> 
    <template v-slot:default>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list>  
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

子组件 todoList.vue

<slot>我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)

父页面

<todo-list> 
    <template v-slot:todo>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 
// todo
data() {
   return {
    dynamicSlotName:"todo" 
   }

 },

子组件

<slot name="todo">我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

对 v-slot:todo 做操作:

动态命名

v-slot:{dynamicSlotName}//替换标签上 v-slot:todo

具名插槽缩写(匿名插槽用法)(可以后看)

#todo 替换标签上 v-slot:todo

匿名如果想用必须加上default

#default 替换标签上 v-slot:todo

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

作用域插槽

1.重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据

父页面

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

子组件

<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默认数据  v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang


## 显示 ##
// yue

解构插槽Prop

父页面 (子组件不变 显示一样)

// 相当于
function (slotProps) {
 // 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换
<todo-list>
 <template v-slot:todo="{user,test}
" >
   {{user.firstName}}
 </template> 
</todo-list> 
## 显示 ##
## // yue

参数值替换名字(可以后看)

<todo-list>
 <template v-slot:todo="{user:person,test}
" >
   {{person.firstName}}
 </template> 
</todo-list> 

// v-slot:[dynamicSlotName]="{user:person,test}
## 显示 ##
## // yue

独占默认插槽缩写(可以后看)
感觉没什么机会用,限制条件太多

总结

在用上v-slot之后 只需要考虑好

1.是否需要命名(匿名插槽,具名插槽)
2.父页面是否需要取存在子页面的数据(作用域插槽)

todo-list实例

可以试一下,便于理解~

父页面

<template>
  <div>
    新插槽 v-slot 代替具名插槽 作用于插槽
    <todo-list
    > 
    <template #todo="{todos:list}">
      <div @click = type(todos.id)>
         {{list.text}}
      </div>
        
    </template>
    </todo-list>  
  </div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
 name:"vSlot",
 components:{
  todoList
 },
 data() {
   return {

   }
 },
 methods: {
   type(data){
    console.log(data)
   }
 },
}
</script>

子组件

<template>
  <ul class="slotTodoChildren">
    <li class="lis"
      v-for="todo in todoList"
      v-bind:key="todo.id"
    >
      <!--
      我们为每个 todo 准备了一个插槽,
      将 `todo(todoList里的)` 对象作为一个插槽的 prop 传入。
      -->
      <slot name="todo" :todos="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
      </slot>
    </li>
  </ul>
</template>
<script>
export default {
  name:"slotChildren",

  data() {
    return {
      todoList:[
      {
        id:1,      
        text:"扫地"
      },
      {
        id:2,
        text:"做饭"
      },
      {
        id:3,
        text:"擦桌子"
      }
    ]
    }
  },
  created(){
    console.log(this.filteredTodos)
  }
}
</script>
<style scoped>
.slotTodoChildren .lis{
  display: block;
  background: #434534;
  line-height:40px;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
  height: 40px;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
js精度溢出解决方案
Dec 02 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 #Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 #Javascript
Node.js Event Loop各阶段讲解
Mar 08 #Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 #Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 #Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 #Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 #Javascript
You might like
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
FCK调用方法..
2006/12/21 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
浅谈Python中数据解析
2015/05/05 Python
Python对数据库操作
2016/03/28 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python类中super() 的使用解析
2019/12/19 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python爬虫开发与项目实战
2020/12/16 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
教师自荐信范文
2013/12/09 职场文书
大学生评语大全
2014/04/18 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
读群众路线的心得体会
2014/09/03 职场文书
运动会开幕词
2015/01/28 职场文书
党员自我评价范文2015
2015/03/03 职场文书
党支部考察意见范文
2015/06/02 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server