vue 3 具名插槽、作用域插槽、自定义指令使用的table案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、项目目录

二、源代码

• main.js

import {
    createApp } from 'vue'
import App from './App.vue'
import './index.css'
//导入axios
import axios from 'axios'
//导入bootstrap
import '../src/assets/css/bootstrap.min.css'
const app = createApp(App)
//配置axios的默认访问地址
axios.defaults.baseURL = 'https://applet-base-api-t.itheima.net/'
//全局配置axios
app.config.globalProperties.$http = axios
app.mount('#app')

• index.css

:root{
   
  font-size: 12px;
}
body{
   
  padding: 10px;
}

• App.vue

<template>
  <div>
    <h1>这是APP根组件</h1>
    <hr />
    <!-- 具名插槽 -->
    <myTable :goodsList="goodsList">
      <template #header>
        <th scope="col">序号</th>
        <th scope="col">商品名称</th>
        <th scope="col">价格</th>
        <th scope="col">标签