安装 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>
使用插槽组件
<!-- 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>