外包网站开发合同范本,网站建设与服务技能实训心得体会,杭州网站设计工作室,常州公司网站建设多少钱首页主体-面板组件封装 新鲜好物、人气推荐俩个模块的布局结构上非常类似#xff0c;我们可以抽离出一个通用的面板组件来进行复用 目标#xff1a;封装一个通用的面板组件 思路分析
图中标出的四个部分都是可能会发生变化的#xff0c;需要我们定义为可配置主标题和副标题…首页主体-面板组件封装 新鲜好物、人气推荐俩个模块的布局结构上非常类似我们可以抽离出一个通用的面板组件来进行复用 目标封装一个通用的面板组件 思路分析
图中标出的四个部分都是可能会发生变化的需要我们定义为可配置主标题和副标题由于是纯文本我们定义成props即可右侧内容和主体内容由于可能会传入较为复杂的自定义模板我们定义成slot利用插槽渲染
核心代码
1组件编写
Home/components/home-panel.vuescript langts setup nameHomePanel/script
templatediv classhome-paneldiv classcontainerdiv classheadh3新鲜好物small新鲜出炉 品质靠谱/small/h3XtxMore to//XtxMore/div面板的内容/div/div
/templatestyle scoped langless
.home-panel {background-color: #fff;.head {padding: 40px 0;display: flex;align-items: flex-end;h3 {flex: 1;font-size: 32px;font-weight: normal;margin-left: 6px;height: 35px;line-height: 35px;small {font-size: 16px;color: #999;margin-left: 20px;}}}
}
/style2props处理src/views/home/components/home-panel.vue
标题和子标题应该有父组件传递进来不能写死
script langts setup nameHomePanel
defineProps({title: {type: String,required: true,},subTitle: {type: String,required: true,},
})
/script3父组件传入title和subTitle
script langts
import HomePanel from ./components/home-panel.vue
/script!-- 新鲜好物 --
HomePanel title新鲜好物 subTitle新鲜出炉 品质靠谱/HomePanel4插槽处理右侧的查看全部和面板具体的内容不应该写死src/views/home/components/home-panel.vue
templatediv classhome-paneldiv classcontainerdiv classheadh3{{ title }}small{{ subTitle }}/small/h3!-- 具名插槽 --slot nameright/slot/div!-- 默认的内容插槽 --slot/slot/div/div
/template5父组件修改
!-- 新鲜好物 --
HomePanel title新鲜好物 subTitle新鲜出炉 品质靠谱template #rightXtxMore to//XtxMore/templatediv我是内容/div
/HomePanel
bTitle新鲜出炉 品质靠谱template #rightXtxMore to//XtxMore/templatediv我是内容/div
/HomePanel
