vue中slot,slot-scope,v-slot的用法和区别

slot 用于设置标签的属性值(slot="title")
slot-scope
v-slot

slot

javascript 复制代码
 <el-menu-item v-if="!navMenu.children" :key="navMenu.id" :index="navMenu.id + ''" @click="itemClick(navMenu)" >
   <span slot="title">{{ navMenu.name }}</span>
</el-menu-item>
javascript 复制代码
<span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="save">确 定</el-button>
</span>

slot-scope

javascript 复制代码
<el-table-column label="修改时间" width='150' align='center'>
  <template slot-scope="scope">{{scope.row.modifyTime|formtterDate}}</template>
</el-table-column>

v-slot

javascript 复制代码
<Test>
  <template v-slot:header="scope">//v-slot定义作用域插槽
	   <div>
	     <p> {{scope.msg}} </p>
	   </div>
  </template>
</Test>
相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder6 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js