VUE插槽/插槽传参

父组件<template><Son><template slot-scope="scope"> //scope 所有数据{{scope.data}}//'传传传传传'</template><template slot="slots" slot-scope="scope"> //具名插槽{{scope.msg}}//'参参参参参'</

Fort_111

5894人浏览 · 2022-04-03 19:49:03

Fort_111 · 2022-04-03 19:49:03 发布

父组件
<template>
	<Son> 
    <template slot-scope="scope"> //scope 所有数据
     	 {{scope.data}}   //'传传传传传'
		</template>

		<template slot="slots" slot-scope="scope"> //具名插槽
     	 {{scope.msg}}   //'参参参参参'
		</template>
  </Son>
</template>

<script>
import Son from '@/components/Son'
export default {
 componens:{Son}
}
</script>  


子组件
<template>
	<div>
    <slot :data="data"></slot>  //自定义变量
    <slot name="solts" :msg="abc"></slot>  //具名插槽
  </div>
</template>

<script>
export default {
 name:'Meldes',
 data(){
   return{
     data:'传传传传传'
     abc:'参参参参参'
   }
 },
}
</script>