vue2 封装插槽组件

安装 element-ui

npm install element-ui --save ---force

main.js 导入

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({ el: '#app', render: h => h(App) });

创建一个插槽组件

  • 具名插槽 (Named Slots) :允许你在组件中定义多个插槽,并为它们命名。在上面的示例中,header 是一个具名插槽。

  • 默认插槽 (Default Slot):如果没有提供具名插槽,插入的内容会放入默认插槽。

    <template>
    <slot name="header"></slot>
    <slot></slot>
    </template> <script> export default { name: 'BaseCard' } </script> <style scoped> .card { border: 1px solid #ddd; border-radius: 4px; padding: 16px; } .card-header { font-size: 1.25em; margin-bottom: 10px; } .card-body { font-size: 1em; } </style>

使用插槽组件

复制代码
<!-- App.vue -->
<template>
  <div>
    <BaseCard>
      <template v-slot:header>
        <h2>Card Title</h2>
      </template>
      <p>This is the card content.</p>
    </BaseCard>
  </div>
</template>

<script>
import BaseCard from './components/BaseCard.vue'

export default {
  name: 'App',
  components: {
    BaseCard
  }
}
</script>

作用域插槽:

组件:

复制代码
<!-- BaseCard.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header" :title="headerTitle"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseCard',
  data() {
    return {
      headerTitle: 'Default Title'
    }
  }
}
</script>

使用:

复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <BaseCard>
      <template v-slot:header="slotProps">
        <h2>{{ slotProps.title }}</h2>
      </template>
      <p>This is the card content.</p>
    </BaseCard>
  </div>
</template>

<script>
import BaseCard from './components/BaseCard.vue'

export default {
  name: 'ParentComponent',
  components: {
    BaseCard
  }
}
</script>
相关推荐
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding8 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜8 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD8 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding8 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空8 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说9 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录13 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店13 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app