网站做导航条,可以做空股票的网站,南京小程序开发网站建设,网络营销平台建设背景增加组件的复用性#xff0c;个人体验组件化还是react 方便。
Vue插槽solt如何传递具名插槽的数据给子组件#xff1f;
一、solt 原理
知其然知其所以然
Vue的插槽#xff08;slots#xff09;是一种分发内容的机制#xff0c;允许你在组件模板中定义可插入的内容… 背景增加组件的复用性个人体验组件化还是react 方便。
Vue插槽solt如何传递具名插槽的数据给子组件
一、solt 原理
知其然知其所以然
Vue的插槽slots是一种分发内容的机制允许你在组件模板中定义可插入的内容然后在使用组件的地方提供这些内容。
插槽的工作原理是这样的 当Vue编译一个组件模板时它会查找所有的slot元素。每个slot元素都代表一个插槽。 对于每个插槽Vue会查看它是否有名字通过name属性指定。如果有那么它就是一个具名插槽如果没有那么它就是一个默认插槽。 当Vue渲染一个组件时它会查看组件的父上下文中是否提供了插槽内容。如果提供了那么Vue会用这些内容替换掉插槽如果没有提供那么Vue会使用插槽的默认内容如果有的话。 插槽内容是在父上下文中编译的但是它们可以访问子上下文中的数据。这是通过作用域插槽实现的你可以在插槽内容中使用特殊的template元素并通过v-slot指令提供一个可以访问子上下文中数据的模板。
这就是Vue插槽的基本工作原理。插槽是Vue组件系统的一个重要部分它们提供了一种灵活的方式来组合和重用组件。
二、单个插入结构
子组件
上文略....el-table :datatableData stylewidth: 100%slot/slot
/el-table下文略....
父组件中你可以这样使用ExportRecordsModal组件并填充插槽
ExportRecordsModalv-model:diaShowdiaShow:onDialogCloseonDialogClose:onDownLoaddownLoad:tableDatatableDataList:diaPaginationdiaPagination:sizeChangeDiasizeChangeDia:currentChangeDiacurrentChangeDia
// 插槽DOMel-table-column label导出时间template #defaultscopespan{{ scope.row.createTime }}/span/template/el-table-column
/ExportRecordsModal
三、多个插槽
子组件
上文略....el-table :dataprops.tableData stylewidth: 100%slot namecolumn1/slotslot namecolumn2/slot
/el-table下文略....
父组件
ExportRecordsModalv-model:diaShowdiaShow:onDialogCloseonDialogClose:onDownLoaddownLoad:tableDatatableDataList:diaPaginationdiaPagination:sizeChangeDiasizeChangeDia:currentChangeDiacurrentChangeDia
template #column1el-table-column label序号template #defaultscopespan{{ scope.row.createTime }}/span/template/el-table-column/templatetemplate #column2!-- 你的第二个列定义 --/template
/ExportRecordsModal
实现前 实现后
