【Vue 全家桶】4、Vue中的ajax(http请求方法)

目录

slot插槽

默认插槽

具名插槽

作用域插槽

html 复制代码
<!-- 子组件 template -->
<div>
  <header>
    <slot name="header"></slot> <!-- 具名插槽 -->
  </header>
  <main>
    <slot></slot> <!-- 默认插槽 -->
  </main>
  <footer>
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </footer>
</div>

<!-- 父组件使用 -->
<my-component>
  <template v-slot:header>
    这里是头部内容
  </template>
  <template v-slot:default> <!-- 或者省略 :default -->
    这里是主体内容
  </template>
  <template #footer> <!-- # 是 v-slot: 的简写 -->
    这里是底部内容
  </template>
</my-component>


<!-- 子组件 template -->
<div>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot> <!-- 作用域插槽 -->
    </li>
  </ul>
</div>

<!-- 父组件使用 -->
<my-component :items="itemsList">
  <template v-slot:default="{ item }"> <!-- 解构获取 item -->
    {{ item.name }} - ${{ item.price }}
  </template>
</my-component>
相关推荐
会豪1 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark2 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言