vue3 中 多层组件嵌套,插槽实现, 以及插槽值向上传递

• 不管嵌套多少层,都需要实现一下插槽
• 插槽值传递时, 接收按照冒号:后的名称接收

插槽组件 slotCom.vue

<template>
    <div>
    	//向上传递的testData是自定义的属性, 如果改变,接收的地方也要相应改成同名的属性
    	/**
    	* 比如 <slot name="test" :row="{a:11,b:22}"> 
    	* 组件itemCom.vue和formCom.vue中 需要改成
    	* <template #row="{row}">
    	*	 <slot name="test" :row="row"></slot>
    	* </template>
    	* 
		*/
		// 注意: 接收时按照冒号:后的名称接收
		/**
    	* 比如 <slot name="test" :row="{a:11,b:22}"> 
    	* 组件itemCom.vue 中自定义成rowData
    	* <template #row="{row}">
    	*	 <slot name="test" :rowData="row"></slot>
    	* </template>
    	*  组件formCom.vue 接收自定义的rowData 以此类推
    	* <template #row="{rowData}">
    	*	 <slot name="test" :rowForm="rowData"></slot>
    	* </template>
    	* 
		*/
        <slot name="test" :testData="{a:11,b:22}"> 
			插槽默认值
        </slot>
    </div>
</template>

子组件 itemCom.vue

<template>
    <div>
    	<strong>这是Item组件</strong>
        <slotCom>
         //需要实现一下插槽
            <template #test="{testData}">
                // 插槽中有值传递时,需要接收一下 :testData="testData" 
				<slot name="test" :testData="testData"></slot>
            </template>
        </slotCom>
    </div>
</template>
<script setup lang="ts">
import slotCom from './components/slotCom.vue';
</script>

父组件 formCom.vue (不是页面)

<template>
    <div>
    	<strong>这是Form组件</strong>
       <itemCom>
	       //需要实现一下插槽
			<template #test="{testData}">
			// 插槽中有值传递时,需要接收一下 :testData="testData"
				<slot name="test" :testData="testData"></slot>
			</template>
		</itemCom>
    </div>
</template>
<script setup lang="ts">
import itemCom from './components/itemCom.vue';
</script>

页面中

<template>
    <div>
    	<strong>这是菜单页面</strong>
       <formCom>
			<template #test="{testData}">
				<p>{{testData}}</p>
				<el-button type="primary" size="default">被传入的按钮</el-button>
			</template>
		</formCom>
    </div>
</template>
<script setup lang="ts">
import formCom from '@/components/formCom.vue';
</script>