共计 1462 个字符，预计需要花费 4 分钟才能阅读完成。
1. 具名组件
咱们一个组件里须要多个插槽, 就须要用到 slot 的name属性
<!-- 子组件定义 -->
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<!-- 父组件 -->
<div>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here some contact info</p>
</template>
</div>
2. 作用域组件
自 2.6.0 起有所更新。已废除的应用 slot-scope attribute 的语法在这里
有时让插槽内容可能拜访子组件中才有的数据是很有用的
// 父组件应用子组件的值
<current-user>
<template v-slot:default="slotProps">
{{slotProps.user.firstName}}
</template>
</current-user
// 子组件向父组件传递值
<span>
<slot v-bind:user="user">
{{user.lastName}}
</slot>
</span>案例
子组件定义插槽
<template>
<div>
<!-- 具名插槽 -->
<slot name="title"/>
<!-- 作用域插槽 向父组件传递值 -->
<slot name="item" v-bind="{value:'vue'}" />
</div>
</template>
<script>
export default {name:"test"}
</script>
<style>
</style>父组件应用子组件插槽
<template>
<div id="app">
{{msg}}
<Solt>
<template v-slot:title>
<h1> 这段内容会填充到子组件中 </h1>
</template>
<!-- 应用 props 来接管 {value:'vue'} 值 -->
<template v-slot:item="props">
<p>======={{props}}</p>
</template>
</Solt>
</div>
</template>
<script>
// 导入子组件
import Solt from './components/Solt'
export default {
name: 'App',
data() {
return {
msg: "hello 入门小站",
name:"name",
type:"入门",
list:['入门','小站'],
view:true
}
},
methods: { },
components: {Solt // 必须要定义子组件}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>源码:https://github.com/mifunc/rum…
正文完
