[JavaScript知识库]vue中的具名插槽、slot

1、父组件

1.1、html部分

<div id="app">
	<h2>父组件</h2>
	<hr />
	<scope-slots>
		<!-- 写法一 -->
		<template slot="namedSlot">{{ content }}</template>
		<!-- 写法二 -->
		<!-- <template v-slot:namedSlot>{{ content }}</template> -->
	</scope-slots>
</div>

注意：不能与作用域插槽共同使用，两者是互斥关系。也就是不能写成<template v-slot:namedSlot v-slot="article"> {{ article.info.title }}</template>或者<template slot="namedSlot" v-slot="article"> {{ article.info.title }}</template>，这两种写法都不起作用，且报错。

1.2、JavaScript部分

import ScopeSlots from "./components/ScopeSlots.vue";

export default {
	name: "App",
	components: {
		ScopeSlots,
	},
	data() {
		return {
			content: "具名插槽从父组件获取数据渲染",
		};
	},
};

2、子组件

<div>
	<h3>子组件</h3>
	<div>
		<h5>具名插槽</h5>
		<slot name="namedSlot"></slot>
	</div>
</div>

3、其他插槽链接

3.1、作用域插槽