Vue3自定义组件slots_bootstrap教程，layUI教程，前端框架教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口，在调用组件时，可以在组件的标签中间插入文字、html内容或变量。

下面为案例：
1、自定义一个按钮组件

01<template>
02<button class="btn-primary">
03    <slot></slot>
04</button>
05</template>
06<script>
07export default {
08}
09</script>
10<style lang="scss">
11.btn-primary {
12    padding: 5px 10px;
13    background: orange;
14    color: #fff;
15    border: none;
16}
17</style>

2、调用这个组件

`1`	`<v-button` `class="btn-primary">登录</v-button>`

slot还允许在自定义组件里面传入任意的html标签,或者其他组件

1<v-button class="btn-primary">
2    <i>Icon</i> 登录
3</v-button>

slot中还可以绑定父组件的数据

1<v-button class="btn-primary">
2    <i>Icon</i> 登录
3    {{title}}
4</v-button>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

Vue3自定义组件slots

猜你喜欢