益阳做网站公司,管理咨询公司信息,苏州网站设计制作,wordpress太慢应用情景#xff1a;点击【设置列宽】#xff0c;表格显示边框#xff0c;再点击#xff0c;隐藏边框#xff0c;依此循环 实现应用效果的情况分析#xff1a;
父组件传递 border
// 父组件
script setup langts nameReagent
/scr…应用情景点击【设置列宽】表格显示边框再点击隐藏边框依此循环 实现应用效果的情况分析
父组件传递 border
// 父组件
script setup langts nameReagent
/scripttemplateReagentTable :borderisBorder /
/template
情况1
子组件 defineProps border
孙组件 :borderprops.border
// 子组件
script setup langts nameReagentTable
const props defineProps{border: boolean;
}();
/scripttemplate// 孙组件el-table :borderprops.border ... /
/template
情况2
子组件 defineProps border
孙组件 v-bind$attrs :borderprops.border
// 子组件
script setup langts nameReagentTable
const props defineProps{border: boolean;
}();
/scripttemplate// 孙组件el-table v-bind$attrs :borderprops.border ... /
/template
情况3
子组件没有 defineProps border
孙组件 v-bind$attrs :border$attrs.border
// 子组件
script setup langts nameReagentTable
/scripttemplate// 孙组件el-table v-bind$attrs :border$attrs.border ... /
/template
情况4
子组件没有 defineProps border
孙组件 v-bind$attrs
// 子组件
script setup langts nameReagentTable
/scripttemplate// 孙组件el-table v-bind$attrs ... /
/template
情况5
子组件没有 defineProps border
孙组件 :border$attrs.border
// 子组件
script setup langts nameReagentTable
/scripttemplate// 孙组件el-table :border$attrs.border ... /
/template
总结
父组件情况子组件孙组件 el-table 有 border 说明传递 border1 defineProps border :borderprops.border2 v-bind$attrs :borderprops.border $attrs 中不包含 border3/ v-bind$attrs :border$attrs.border $attrs 中包含 border 在 $attrs 中指定 border 4 v-bind$attrs$attrs 中包含 border多层透传5 :border$attrs.border 在 $attrs 中指定 border
获取 $attrs 的内容
import { useAttrs } from vue; const attrs useAttrs();
console.log($attrs , attrs);输出打印
:border$attrs.border与直接使用 v-bind$attrs 的区别
方法示例优点缺点单个属性透传:border$attrs.border精确控制单个属性需要为每个属性单独处理批量透传v-bind$attrs自动传递所有属性可能传递不需要的属性
推荐组合使用
el-table:border$attrs.border !-- 明确处理的属性 --v-bindfilteredAttrs !-- 传递其他属性 --
