Vue项目中常见问题(73)组件通信-作用域插槽

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

作用域插槽

 1.基础结构

 2.父组件给子组件传递数据

 3.作用域插槽

效果一:显示TODO列表时,已完成的TODO为绿色

效果二:显示TODO列表时,带序号,TODO的颜色为蓝绿搭配

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

作用域插槽

插槽:可以实现父子组件通信(通信的结构)

默认插槽

具名插槽

作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观的

1.基础结构

src/pages/Communication/ScopeSlotTest/ScopeSlotTest.vue中:

 效果:

 2.父组件给子组件传递数据

src/pages/Communication/ScopeSlotTest/ScopeSlotTest.vue中:

父组件给子组件传递数据

 sr