作用域插槽、slot-scope、v-slot指令

作用域插槽可以让父组件拿到子组件中的数据，并使用。

作用域插槽的使用和scope

子组件

<slot :game="game"></slot>

data() {return {game: [ 'qq飞车', '洛克王国' ]}
}

子组件通过 v-bind 确定要传递的数据 game

父组件

<slot scope='study'></slot>

父组件要想拿到数据，需要使用scope接收。study 是自己定义，不必和传递的属性名 game 保持一致

使用要点

数据会以对象的形式进行传递

{{ study }}显示到页面。可以发现传递的数据是一个对象的形式
```
{ game: [ 'qq飞车', '洛克王国' ] }
```
所以在使用的时候：study.game
支持结构赋值
```
<slot scope = "{ game }"></slot>
```
scope与slot-scope效果相同

具体可以参考vue官网文档

https://v2.cn.vuejs.org/v2/api/?#slot-scope-%E5%BA%9F%E5%BC%83

v-slot指令

vue 2.6.0新增。完全代替上述所有

<template v-slot:插槽名称= "插槽数据">插槽内容</template>

缩写方式为：#

<templat v-slot:header="study"></template>

<templat #header="study"></template>

具体内容参考：细致讲解slot插槽的使用

作用域插槽、slot-scope、v-slot指令相关推荐

Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...
Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
Vue全家桶系列文章目录内容参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）
一.认识插槽Slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示: 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定 ...
Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用具名插槽slot 2. 编译作用 ...
VUE——slot插槽（特别重要，尤其是作用域插槽）
文章目录求一键三连重点认识插槽插槽的使用多个插槽(具名插槽 name=''name" #name) 当图片路径较深时怎么办:使用@ 渲染作用域作用域插槽(插槽传递子组件属性) 子 ...

作用域插槽、slot-scope、v-slot指令

作用域插槽、slot-scope、v-slot指令

作用域插槽的使用和scope

子组件

父组件

使用要点

作用域插槽、slot-scope、v-slot指令相关推荐

最新文章

热门文章