Vue.js（17）之插槽

通过案例认识插槽：如何理解Vue的作用域插槽

1、单个插槽（匿名插槽）

定义插槽：在子组件作用域中，使用 <slot></slot> 定义一个插槽；
使用插槽：在父作用域中使用带有插槽的组件时，组件内容区域中的内容，会插入到插槽中显示；
注意：在一个组件的定义中，只允许出现一次匿名插槽

2、多个插槽（具名插槽）

定义具名插槽：使用 name 属性为 slot 插槽定义具体名称；<slot name="header"></slot>
使用具名插槽：在父作用域中使用带有命名插槽的组件时，需要为内容指定 slot="插槽name" 来填充到指定名称的插槽；

页面展示：

3、作用域插槽

定义作用域插槽：在子组件中，使用 slot 定义插槽的时候，可以通过 属性传值 的形式，为插槽传递数据，例子：<slot text="hello world" :msg="sonMsg" row="rowData"></slot>
使用作用域插槽：在父作用域中，通过定义 slot-scope="scope" 属性，接收并使用插槽数据；
注意：同一组件中不同插槽的作用域，是独立的！

页面展示：

转载于:https://www.cnblogs.com/houfee/p/10036249.html

Vue.js（17）之插槽相关推荐

（17）打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
vue.js 的学习之路
转自:http://www.cnblogs.com/CyLee/p/5813721.html 技术栈 # vue官网 http://vuejs.org/# Vuex中文手册 http://vuex.v ...
vue.js 的学习
⭐️ ? ✨ ⚡️ 技术栈 # vue官网http://vuejs.org/ # Vuex中文手册 http://vuex.vuejs.org # Vue-Router 手册 http://route ...
coderwhy老师vue.js b站视频教程笔记——第四部分
从项目开始 07.(掌握)项目开发-项目创建和github托管 1.项目目录列表有config文件夹是脚手架2,没有的话是脚手架3 2.使用github 2.1 通过拷贝的方式提交代码到github- ...
【毕业设计】基于Vue.js画作交流平台的设计与实现
文章目录摘要 Abstract 引言系统开发理论基础开发语言简介 HTML5 JavaScript Less PHP R Python Go 框架简介 Vue.js ThinkPHP Flask ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.11-3.12）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.11-3.12) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
coderwhy老师vue.js b站视频教程笔记——第一部分
原创不易,转载请注明出处,谢谢! 第一部分:Vue基础语法--组件化开发--模块化开发--webpack Day 01 01.(了解)vue.js课程介绍 Vue.js课程学习路线 Vue基础语法-- ...
前端面试题整理（vue/js/css）
什么是盒子模型把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型盒子模型有两种形式:标准盒子模型,怪异盒子模型标准模式,总 ...

Vue.js（17）之插槽

1、单个插槽（匿名插槽）

2、多个插槽（具名插槽）

3、作用域插槽

Vue.js（17）之插槽相关推荐

最新文章

热门文章

Vue.js（17）之 插槽

1、单个插槽（匿名插槽）

2、多个插槽（具名插槽）

3、作用域插槽

Vue.js（17）之 插槽相关推荐

最新文章

热门文章

Vue.js（17）之插槽

Vue.js（17）之插槽相关推荐