Vue.js插槽slot和作用域插槽slot-scope学习小结

一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太适用,Vue给我们提供了slot(插槽)可以实现这种应用场景.下面是自己学习后总结的几种插槽使用方式

1. 普通使用方式

子组件
<template><div><!-- 如果有多个插槽,可以通过name命名 --><div style="background-color: yellowgreen"><slot name="header"></slot></div><!-- 父组件传递过来的值会展示在slot标签中 --> <slot></slot><ul v-if="todo"><li>姓名: {{todo.name}}</li><li>年龄: {{todo.age}}</li><li>爱好: {{todo.hobby}}</li></ul><div style="color: gold"><slot name="footer"></slot></div></div>
</template><script>
export default {name: 'child',props: {todo: Object},data () {return {}},created () {console.log(this.todo, 'todo')}
}</script>// 父组件
<template><div><!-- 引入子组件 --><child :todo="list"><!-- 这里的内容会渲染到子组件name为header的标签中 --><template slot="header"><p>放在头部的内容</p></template><!-- 子组件双标签中的内容会被渲染到子组件的slot标签里 --><h3>插槽标题</h3><!-- 这里的内容会渲染到子组件name为footer的标签中 --><template slot="footer"><p>放在底部的内容</p></template></child></div>
</template><script>
import child from './child'
export default {name: 'parent',components: {child},data () {return {list: {name: '灵梦', age: 18, text: '热爱学习', hobby: '踢足球'}}}}
</script>

渲染效果:

2. 作用域插槽

如果你希望从子组件获取数据,进行其他数据展示,这个时候你可以使用作用域插槽

子组件
<template><div><ul v-if="todo.length" v-for="item in todo" :key="item.id"><li>姓名: {{item.name}}</li><li>年龄: {{item.age}}</li><li>爱好: {{item.hobby}}</li></ul></div>
</template>
<script>
export default {name: 'child',props: {todo: Array}</script>// 父组件
<template><div><!-- 引入子组件 --><child :todo="list"></child></div>
</template><script>
import child from './child'
export default {name: 'parent',components: {child},data () {return {list: [{name: '灵梦', age: 18, text: '热爱学习', hobby: '踢足球', id: 1},{name: '李明', age: 13, text: '画画很棒', hobby: '画画', id: 2},{name: '韩梅梅', age: 25, text: '性格文静', hobby: '做手工', id: 3}]}}}
</script>

普通调用,渲染出来的数据就是这样,但是如果我们想在第二项渲染中把hobby改成text,这时候就需要子组件把数据传过来,父组件改变渲染方式了

// 子组件
<template><div><ul v-if="todo.length" v-for="(item,index) in todo" :key="item.id"><li>姓名: {{item.name}}</li><li>年龄: {{item.age}}</li><!-- 如果是第二项,就使用作用域插槽,重新展示 --><li v-if="index === 1"><!-- 定义了content把item传递到父组件,定义的名字可以随意取,需要传递的数据写在后面 --><slot :content="item"></slot></li><li v-else>爱好: {{item.hobby}}</li></ul></div>
</template>
<script>
export default {name: 'child',props: {todo: Array}</script>// 父组件
<template><div><!-- 引入子组件 --><child :todo="list"><!-- 在子组件用slot-scope结收传递过来的数据,接收的名字可以随意取 --><template slot-scope="scope"><!-- scope后接的就是你在子组件定义的传递值的名称,scope.content就拿到了传递过来的值,在这里可以直接使用 -->描述: {{scope.content.text}}</template></child></div>
</template><script>
import child from './child'
export default {name: 'parent',components: {child},data () {return {list: [{name: '灵梦', age: 18, text: '热爱学习', hobby: '踢足球', id: 1},{name: '李明', age: 13, text: '画画很棒', hobby: '画画', id: 2},{name: '韩梅梅', age: 25, text: '性格文静', hobby: '做手工', id: 3}]}}}
</script>

渲染出来的效果是这样,第二项李明的展示内容就改变了

在很多Vue的插件中也有使用作用域插槽的,比如element-ui的table组件,它就可以通过添加作用域插槽改变渲染的原始数据

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/10001512.html

Vue.js插槽slot和作用域插槽slot-scope学习小结相关推荐

Vue.js（17）之插槽
通过案例认识插槽:如何理解Vue的作用域插槽 1.单个插槽(匿名插槽) 定义插槽:在子组件作用域中,使用 <slot></slot> 定义一个插槽: 使用插槽:在父作用域中使用 ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
vue.js crud_ASP.NET CORE —从零到英雄学习ADO.NET中的CRUD操作
vue.js crud ADO.NET ASP.NET Core中的CRUD操作在此ASP.NET Core教程中,您将从一开始就学习在ADO.NET中进行CRUD操作. 本教程将帮助您学习ADO. ...
Vue.js 入门：去哪儿网APP案例学习记录
推荐博客 Vue 2.5 开发去哪儿旅游网站项目记录项目源码 : https://gitee.com/doublesgzl/Travel 第六章项目实战 6-1 环境配置 (建议看下视频) 6 ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）
一.认识插槽Slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示: 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定 ...
Vue 中的作用域插槽
作用域插槽 <div id="root"><child></child> </div> Vue.component('child', ...

Vue.js插槽slot和作用域插槽slot-scope学习小结

Vue.js插槽slot和作用域插槽slot-scope学习小结相关推荐

最新文章

热门文章