vue中的具名插槽slot

Posted 2022-02-05 web半晨

目录

• 1、父组件
• • 1.1、html部分
  • 1.2、JavaScript部分
• 2、子组件
• 3、其他插槽链接

---

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、作用域插槽