vue2中具名插槽的简单使用

1.首先可以创建两个组件，一个父组件（App.vue）和一个子组件（btn.vue）

2.btn.vue子组件内写入如下代码

 

<template>
    <div >
      <!-- btnOne的内容目前已经被父组件传过来的按钮1替代了 -->
      <slot name="btnOne">我是one</slot>  
      <slot name="btnTwo">我是two</slot>
    </div>
    </template>

    <script>
    export default{
       data(){
        return{
          
        }
       }
    }
    </script>

    <style scoped>

    </style>

3.在父组件App.vue内引入btn子组件，注册并且使用。（截图有其他内容可以省略，相关代码片段如下）

 

<template>
  <div id="index_container">
    <div id="button">
    <Btn>
      <template slot="btnOne">
        <el-button class="btn1">按钮1</el-button>
      </template>
      <template slot="btnTwo">
        <el-button class="btn2">按钮2</el-button>
      </template>
    </Btn>
    </div>
  </div>
</template>
  <script>
  import Btn from '@/components/Btn.vue'
    export default {
     components:{Btn}
    }
  </script>

4.最后呈现的效果，就是父组件内的button按钮替代了 子组件内的内容

｜注：在vue3中具名插槽 需要用v-slot：名字 来使用即可 。