Vue 3.x 自定义组件的 slots
slots (插槽),父组件在使用子组件的时候,在子组件插入任意内,包括html
举个小例子:
1、自定义一个按钮组件
<template>
<div>
<button class="btn-primary">
<slot>default</slot>
</button>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.btn-primary{
padding: 5px 10px;
background: aquamarine;
color: #fff;
border: none;
}
</style>
注:<slot> </slot>
就是父组件可以随意插入内容的位置
2、父组件使用
<template>
<div>
<v-button></v-button>
<br>
<v-button>确定</v-button>
<br>
<v-button>{{msg}}</v-button>
</div>
</template>
<script>
import YtButton from '../components/YtButton'
export default {
data() {
return {
msg: "主页"
}
},
components:{
"v-button":YtButton
}
};
</script>
展示如下图,当父组件没有写内容的时候,显示默认内容,