插槽 slot=“header“ 的数据不刷新问题

官方上插槽 slot="header"这种写法,在template内是获取不到key的,可以将slot=“header” 改成#header ,就可以了刷新数据了
注意:title 需要自己去定义

<template #header>
  <div style="display: inline-flex">
    <span class="title-red">*</span>
    <span>{{ title }}</span>
  </div>
</template>

参考:插槽说明1
插槽说明2

03-08
### Vue.js 中 Slot 的概念与用法 #### 基本概念 在 Vue.js 组件化开发中,`slot` 是一种用于向子组件注入 HTML 内容的方式。通过 `slot` 可以实现父组件向子组件传递自定义的内容,从而增强组件的灵活性和可重用性[^1]。 #### 作用说明 - **默认插槽**:当未指定名称时,默认情况下会渲染此部分内容。 - **具名插槽**:允许多个同位置的内容插入,需使用特定的名字区分各个插槽。 - **作用域插槽**:仅能够传递静态内容,还可以将子组件的数据暴露给父级组件,以便动态生成内容。 #### 实战演练 ##### 案例一:基本用法 最简单的形式如下所示: ```html <!-- 子组件 --> <template> <div class="container"> <slot></slot> <!-- 默认插槽 --> </div> </template> <script setup lang="ts"></script> ``` ```html <!-- 父组件 --> <ChildComponent> 这里是要显示的文字或者HTML结构 </ChildComponent> ``` ##### 案例二:具名插槽 对于多个区域的需求,则可以采用命名方式来分配同的内容片段: ```html <!-- 子组件 --> <template> <header><slot name="header"></slot></header> <main><slot></slot></main> <footer><slot name="footer"></slot></footer> </template> ``` ```html <!-- 父组件 --> <ChildComponent> <template v-slot:header> 头部内容 </template> 主体内容 <template v-slot:footer> 尾部内容 </template> </ChildComponent> ``` ##### 案例三:作用域插槽 如果希望共享一些来自子组件内部的状态或属性至外部,则可通过作用域插槽完成这一目标: ```html <!-- 子组件 --> <template> <ul> <li v-for="(item, index) in items" :key="index"> <slot :text="item.text"></slot> </li> </ul> </template> <script setup lang="ts"> import { ref } from 'vue'; const items = ref([{ text: 'Item A' }, { text: 'Item B' }]); </script> ``` ```html <!-- 父组件 --> <ChildComponent v-slot:default="{ text }"> {{ text }} </ChildComponent> ``` #### 使用技巧与最佳实践 为了确保良好的用户体验和技术表现,在实际项目应用过程中需要注意以下几点: - 清晰规划好哪些地方需要用到 slots; - 合理设置 default 和 named slots 来满足布局需求; - 对于复杂场景考虑引入 scoped slots 提升交互能力; #### 解决常见问题 针对可能出现的问题也提供了相应的解决方案,比如解决插槽内容无法及时更新的情况可以通过监听事件或其他机制触发强制新操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello.鑫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值