vue中插槽（匿名插槽、具名插槽、作用域插槽）的基本使用与传值（子给父传）

vue中插槽（匿名插槽、具名插槽、作用域插槽）的基本使用与传值（子给父传）

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

话不多说，直接上案列

父组件：

<template>
<div class="father" style="background:yellow;width:500px" >
<h3>我是黄色背景的父组件</h3>
 <Chacao>
    <div slot="chaCao1" style="border:1px solid green">
      我是具名插槽（绿色边框）
    </div>
    <div slot="chaCao2" slot-scope="jie" style="border:1px solid blue">
     我是带有传值的作用域插槽（蓝色边框）:<br>
      <span v-for="(item,index) in jie.chuan" :key="index">姓名：{{item.name}} 性别：{{item.sex}} 年龄：{{item.age}}</span>
    </div>
    <div style="border:1px solid pink">
      我是粉色边框的匿名插槽
    </div>
  </Chacao>
</div>
</template>

<script>
import Chacao from '../components/Login/chacao.vue'
export default {
  data(){
    return{
    }
  },
  components:{
    Chacao
  }
}
</script>

子组件：

<template>
  <div class="child" style="border:1px solid red">
    <h3>我是红色边框的子组件</h3>
    <slot name="chaCao1"></slot>
    <slot name="chaCao2" :chuan="arr"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  
  data(){
    return{
      arr:[
        {"name":"张三","sex":"男","age":18},
        {"name":"李四","sex":"男","age":28},
        ]
    }
  }
}
</script>

效果图：