用法示例

vue2.6统一了插槽的语法v-slot

匿名插槽与具名插槽

在其他组件中使用child组件

<child><template v-slot:slotName>hello world</template>
</child>

child组件

<div><slot name="slotName"></slot>
</div>

上面是具名插槽的用法，省略插槽名：name属性或插槽名为default表示匿名插槽

插槽作用域

在其他组件中使用child组件

用法一：常规用法，slotProps为自定义作用域名

<child><template v-slot:slotName=“slotProps”>hello world<span>{{ slotProps.user.firstName }}</span></template>
</child>

用法二：解构插槽Prop，实际上就是ES6解构JSON，可以使用:替换参数名

<child><template v-slot:slotName=“{ user, age:nianling }”>hello world<span>{{ user.firstName }}</span><span>{{ nianling }}</span></template>
</child>

child组件，定义时将需要使用的作用域数据绑定在<slot>即可，:user="user" :age="age"

<template><div><slot name="slotName" :user="user" :age="age"></slot></div>
</template><script>
export default {data () {return {user: {firstName: 'Cliff',lastName: 'Rhine'},age: 24}}
}
</script>

组件使用插槽动态命名

v-slot:{dynamicSlotName}

总结

vue2.6后插槽的用法简单得了很多，也更加灵活，通过上面的示例可以看出，作用域插槽实际上就是在具名插槽的基础上进行赋值。

v-slot:插槽名
v-slot:插槽名="作用域名"
v-slot="作用域名"

vue 2.6 插槽v-slot用法记录相关推荐

Vue系列之插槽（slot）详解
文章の目录 1.什么是插槽了 2.插槽的分类 3.默认插槽的使用 3.1.语法 3.2.示例 4.具名插槽的使用 4.1.什么是具名插槽 4.2.语法 4.3.示例 4.4.缩写 5.作用域插槽的使用 ...
vue中的插槽（slot）
vue中有3种插槽 1.默认插槽 <slot></slot> 2.具名插槽 <slot name="名称"></slot> 3.作用 ...
【前端知识之Vue】对插槽（slot）的理解
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍对插槽(slot)的理解. 文章目录前言一.插槽(slot)是什么二.使用场景三.slot的分类默认插槽具名插槽作用域插槽四.面 ...
Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）
目录前言正文插槽是什么? 怎么使用插槽? 基本用法后备(默认)内容具名插槽作用域插槽插槽版本变化总结前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基 ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
vue 插槽scope_Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将元素作为 ...
Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用具名插槽slot 2. 编译作用 ...
VUE的插槽（slot和slot-scope）
前言在之前的获取当前行数据中,最终的方案是使用了slot-scope="scope"的方式获取了当前行的数据,当时对slot-scope是个什么东东不了解.这两天查看了好多资料, ...
vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容, ...

vue 2.6 插槽v-slot用法记录

v-slot用法简记

用法示例

匿名插槽与具名插槽

插槽作用域

组件使用插槽动态命名

总结

vue 2.6 插槽v-slot用法记录相关推荐

最新文章

热门文章