vue3 template

template 使用情况
1. 根据某个状态渲染多个模板的  v-if v-else
2. 插槽的场景

插槽：
子组件写法：name="title"

<slot name="title" v-bind="{ row: typeItem, index: index }"><div class="menuItemBox">{{ typeItem.name }}</div>
</slot>

父组件调用写法：<template #title="{ row, index }">

<CompanyTypeNav :typeList="menuList" :activity="activity" url=""><template #title="{ row, index }"><div class="leftItem" @click="clickChange(row, index)">{{ row.name }} </div><spanclass="startIcon":class="{ active: row.isFollow }"@click="startHandle(row)"></span></template>
</CompanyTypeNav>

父组件

<FullWidthclass="detailPage":class="{ whiteBg: direData.length > 0 }":otherBreadcrumb="otherBreadcrumb"><template #header><div class="headerDetail" :class="{ spec: (detailData?.title?.length || 0) > 20 }"><div class="txtBox"><h4>{{ detailData.title }}</h4><a-popoverplacement="bottomRight":destroyTooltipOnHide="true"trigger="hover":overlayClassName="overLayClass"><template #content>{{ detailData.excerpt }}</template><p class="introduceTxt"><span> {{ detailData.excerpt }}</span></p></a-popover></div><div class="videoBox" @click="viewVideo" v-if="detailData?.videoPlayList?.length > 0"><img class="videoBg" src="/src/assets/images/knowledge/detail/videoImg.png" alt="" /></div><div class="imgBg" v-else><img :src="detailData?.cover" alt="" /></div></div></template><template #content><!-- 文章模块 --><ContextBody:contentData="contentData":direData="direData":isThumbUp="isThumbUp":isCollect="isCollect"@click-handle="clickHandle":numData="{...handledNum,comment: commentTotal,}"@embed-is-show="embedIsShowHandle"ref="contextRef"/><ThumbUpAndCollect@click-handle="clickHandle":isThumbUp="isThumbUp":isCollect="isCollect":numData="{...handledNum,comment: commentTotal > 9999 ? '1万+' : commentTotal,}"v-if="!embedIsShow"position="fixed"/><!-- 评论区 --><Comment ref="commentsRef" :resourceType="1" :moduleType="3" /><Modal :modalData="modalData" v-if="modalData.show"><template #content><div style="width: 100%; height: 500px"><Video :videoId="modalData.rowData.videoVid" /></div></template></Modal></template></FullWidth>

子组件

<template><div class="FullWidthBox whiteBg" :class="'is' + [getLayoutContentMode]"><div class="headerContent" id="headerContent"><div class="header-breadcrumb"><a-breadcrumb separator=">"><a-breadcrumb-item v-for="(route, index) in routerData" :key="route.path"><span v-if="!route.redirect"> {{ t(route.meta.title) }}</span><a href="javascript:;" @click="handleClick(route, Number(index) + 1)" v-else>{{t(route.meta.title)}}</a></a-breadcrumb-item><a-breadcrumb-itemv-for="(otherItem, otherIndex) in otherBreadcrumb.filter((item) => item.title !== undefined,)":key="otherItem.title"><ahref="javascript:;"v-if="otherItem.path"@click="handleClick(otherItem, otherIndex + 2)">{{ otherItem.title }}</a><span v-else>{{ otherItem.title }}</span></a-breadcrumb-item></a-breadcrumb><GoBack /></div><slot name="header"></slot></div><div class="contentBox" id="contentBox"><slot name="content"></slot></div></div>
</template>

vue3 template相关推荐

VUE3(template使用)
模板template就是定义vue时指定页面的结构构成默认使用mount('选择器')指定挂在元素的内容来构建页面模板可以使用template独立的来定义页面模板,此时挂在元素的内容将被忽略 &l ...
在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别
目录前言正文一.Vue3 与 Vue2 区别概览二.Vue3 与 Vue2 区别详述生命周期多根节点 Composition API 异步组件(Suspense) Teleport 响应式 ...
vue3 效率的提升、composition-api 和 ref 详解
vue3 效率的提升.composition-api 和 ref 详解文章目录 vue3 效率的提升.composition-api 和 ref 详解 vue3 效率的提升优化diff算法 hoi ...
vue2和vue3的区别
文章目录前言一.vue2和vue3双向数据绑定原理的区别? 二.根节点的不同三.Composition API (组合api) 四.生命周期的变化五. vue2和vue3的diff算法六. ...
vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的. ...
前端插件库之vue3使用vue-codemirror插件
vue3插件vue-codemirror使用步骤和实例 vue-codemirror 使用配置说明: 个人代码编辑区Demo vue-codemirror 基于 CodeMirror ,适用于 Vu ...
浅谈vue2与vue3的区别
一.vue2和vue3双向数据绑定原理 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的 vue3发生 ...
【经典面试题】vue2与vue3的区别
目录一. vue2和vue3双向数据绑定原理发生了改变二. Vue3支持碎片(Fragments) 三. Composition API 四. 建立数据 data 五. 生命周期钩子 - Life ...
Vue3+Element-plus监控SoloX APM Data
SoloX Admin:GitHub - smart-test-ti/solox-vue-admin: solox apm data monitoring based on vue3 template ...

vue3 template

vue3 template相关推荐

最新文章

热门文章