slot笔记

Slot

作用：

父组件向子组件传输内容，省略了在子组件中编写属性，直接在标签之中编写内容即可

父组件：

<template>
  <div>
    <Btn>搜索</Btn>
  </div>
</template>

<script>
import Btn from '../components/btn.vue'
export default {
  components:{
    Btn
  }
}
</script>

这里的搜索文本就会在button上显示，这里也可以插入标签什么的比如

<label>搜索<label>

子组件：

<template>
<div style="text-align:center">
   <el-button class="btn">
        <slot></slot>
    </el-button>
</div>
</template>

<script>
export default {
    props:{}
}
</script>

<style scoped>
.btn{
    background: coral;
}
</style>

视图：