父组件：
<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：子组件需要用到父组件里面的变量，父组件需要将数据传给子组件 参考黄底色代码 原理其实就是和平时的父子组件传值是一样的道理
原文：https://www.cnblogs.com/bbldhf/p/14132825.html