在 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍详解vue slot插槽的使用方法,包括了详解vue slot插槽的使用方法的使用技巧和注意事项,需要的朋友参考一下 官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 单个slot使用最简单,也是最常用的,当我们定义了一个子组件,父组件在使用的这个组件的时候,想在内部自定义一些初始化数据,这时候就可以用slot实现。 具名slot只是给slot加了name
本文向大家介绍详解vue使用插槽分发内容slot的用法,包括了详解vue使用插槽分发内容slot的用法的使用技巧和注意事项,需要的朋友参考一下 将父组件的内容放到子组件指定的位置叫做内容分发 单个插槽 父组件app.vue 子组件testSlot.vue 效果图: 多个插槽也叫具名插槽 具名插槽就是将某个名字的内容插到子组件对应名字里面去 父组件app.vue 子组件testSlot.vue 作用
本文向大家介绍vue中slot(插槽)的介绍与使用,包括了vue中slot(插槽)的介绍与使用的使用技巧和注意事项,需要的朋友参考一下 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot
本文向大家介绍Vue作用域插槽slot-scope实例代码,包括了Vue作用域插槽slot-scope实例代码的使用技巧和注意事项,需要的朋友参考一下 vue中的插槽有三种:单个插槽、具名插槽、作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供。比如上
本文向大家介绍vue学习笔记之slot插槽用法实例分析,包括了vue学习笔记之slot插槽用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue slot插槽用法。分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content 使用插槽,如果父组件为空,就会显示slot中定义的默认内容 使用插槽添加header和foot
本文向大家介绍详解vue v-model,包括了详解vue v-model的使用技巧和注意事项,需要的朋友参考一下 1. v-model原理 vue中v-model是一个语法糖,所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说,v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分: 通过props设置子组件的状态 通过监听子组件发出的事件改变父组件