详解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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
PHP文件读写操作相关函数总结
2014/11/18 PHP
微信API接口大全
2015/04/15 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python 装饰器深入理解
2017/03/16 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python实现员工管理系统
2018/01/11 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python切片操作深入详解
2018/07/27 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python线程池如何使用
2020/05/28 Python
查看keras的默认backend实现方式
2020/06/19 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
二年级语文教学反思
2014/02/02 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
中学生自我评价范文
2015/03/03 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
学校运动会感想
2015/08/10 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL