vue插槽

概念

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，
父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，
填充的内容会替换子组件的<slot></slot>标签

使用场景

直接填充内容 ( 匿名插槽 )

1. 在子组件中放一个占位符

<template>
   <div>
      <span>操作</span>
      <slot></slot>
   </div>
</template>
export default{
   name: 'child'
}

2. 在父组件中给占位符填充内容

<template>
   <div>
      <child>
           <button>新增</button><button>删除</button>
      </child>
   </div>
</template>

具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，
而且可以放在不同的地方，而父组件填充内容时，
可以根据这个名字把内容填充到对应插槽中

1. 子组件中设置了两个插槽(title和button)

<template>
   <div>
       <slot name="title"></slot>
       <slot name="button"></slot>
   </div>
</template>
export default{
   name: 'child'
}

2. 父组件通过 v-slot:[name] 的方式t填充内容到对应的插槽中

<template>
   <div>
      <child>
           <template v-slot : title>
                <h1>子组件的标题是</h1>
           </template>
           
           <template v-slot : button>
                <button>新增</button><button>删除</button>
           </template>
           
      </child>
   </div>
</template>

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，
简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，
父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容

父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。如果你在父组件直接使用子组件中的值，是会报错的

子组件
为了让 子组件中的数据 在父级的插槽内容中可用，我们将 数据 作为 元素的一个特性绑定上去

<template>
  <div class="hello">
     Helloworld组件  
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:'oralinge',
        age:18
      }
    }  
  }
}
</script>
————————————————
版权声明：本文为CSDN博主「Oralinge」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Oralinge/article/details/103896320

父组件
在父级作用域中，可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot:default="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
————————————————
版权声明：本文为CSDN博主「Oralinge」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Oralinge/article/details/103896320