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>
       <span
         class="startIcon"
         :class="{ active: row.isFollow }"
         @click="startHandle(row)"
       ></span>
     </template>
</CompanyTypeNav>

猜你喜欢

转载自blog.csdn.net/weixin_41056807/article/details/121423982