vue多层级组件间插槽使用

插槽使用不仅仅存在于父子组件间，当涉及跨级使用时如何处理呢？这里我们以示例的方式进行说明。
有一爷爷辈（Level1）组件嵌套了爸爸辈（Level2）组件，爸爸辈组件中又嵌入了儿子辈（Level3）组件，现需要在爷爷辈组件中设置孙子组件中插槽的内容，实现方式如下：

儿子（level3）组件：

<template>
	<div>
		<h1>谁的{{goods}}？</h1>
		<!-- 定义插槽用于接受其父级组件的插槽内容 -->
		<slot name="cont" :slotData="goods">I am level3's {{goods}}！</slot>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				goods: "apple"
			}
		}
	}
</script>

爸爸（level2）组件：

1）方式1：模板方式：

<template>
	<level3>
		<!-- 调用子组件的插槽，向子组件传递内容 -->
		<template v-slot:cont="{goods}">
			<!-- 定义插槽用于接受其父级组件的插槽内容 -->
			<slot name="cont" :slotData="goods">I am level2's {{goods}}！</slot> 
		</template>
	</level3>
</template>

<script>
	import level3 from "./level3.vue";
	export default{
		components: {
			level3
		}
	}
</script>

2）方式2：渲染函数方式：

export default {
	render(createElement) {
	    return createElement(
	      'level3',
	      {
	        scopedSlots: this.$scopedSlots // 将父组件的作用域插槽传递给子组件
	      }
	    );
	  }
}

爷爷（level1）组件：

<template>
	<level2>
		<!-- 调用子组件的插槽，向子组件传递内容 -->
		<template v-slot:cont="{goods}">
			<div style="color:red">I am level1's {{goods}}！</div>
		</template>
	</level2>
</template>

<script>
	import level2 from "./level2.vue";
	export default{
		components: {
			level2
		}
	}
</script>