匿名插槽传值

父组件：

<template>
  <div>
    <Slots :msg1="msg1" :list="list">
      <template  slot-scope="data">
         {{data.msg}}
      </template>
      
    </Slots>
    <div ref="box1">
      这是一个ref盒子
    </div>
  </div>
</template>

<script>
import Slots from './Slot'
export default {
  components:{
    Slots
  },
  data(){
    return{
       msg1:'99999',
       list:[],
       refsArr:[]
    }
  },
  mounted() {
    setTimeout(() => {
      this.list =[
        {
          name:'111'
        },
        {
          name:'222'
        },
        {
          name:'333'
        },
        {
          name:'444'
        }
      ]
    }, 20);
    
  },
}
</script>

<style>

</style>

子组件：

<template>
  <div class="slot-container">
    <slot :msg="msg"></slot>
    {{msg1}}
    <div v-for="(item,index) in list" :key="index+'i'" ref="deivBlock">
          {{item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props:['msg1','list'],
  data(){
    return{
      msg:'message'
    }
  },
  mounted(){
    // if(this.refsArr.length === 0){
      setTimeout(() => {
      console.log('00000000',this.$refs.deivBlock)
      }, 30);
    // }
  }
}
</script>

<style>

</style>

　需求1：父组件需要用子组件的一个参数，子组件需要将组件内的值传给slot插槽  参考蓝色底代码  这就是插传值的方式  当然这里是匿名插槽的传值也叫做作用域插槽

   需求2：子组件需要用到父组件里面的变量，父组件需要将数据传给子组件  参考黄底色代码 原理其实就是和平时的父子组件传值是一样的道理