VUE插槽/插槽传参

最新推荐文章于 2024-08-22 11:25:48 发布

Fort_111

最新推荐文章于 2024-08-22 11:25:48 发布

阅读量6k

点赞数 4

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Fort_111/article/details/123942946

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

父组件
<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>