就是讓插槽渲染出不同的東西(簡(jiǎn)單來說就是把父級(jí)的數(shù)據(jù)傳到子組件，再?gòu)淖咏M件傳回父組件，讓插槽內(nèi)容有點(diǎn)不同)
<!DOCTYPE html>
<html>
<head>
<title>作用域插槽</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<todo-list :todos="todos">
<!-- 將 `slotProps` 定義為插槽作用域的名字 -->
<template slot-scope="{todo}">
<!-- 為待辦項(xiàng)自定義一個(gè)模板，-->
<!-- 通過 `slotProps` 定制每個(gè)待辦項(xiàng)。-->
<span v-if="todo.isComplete">?</span>
{{ todo.text }}
</template>
</todo-list>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('todo-list', {
props: ['todos'],
template: `
<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id"
>
<slot :todo="todo">
<!-- 回退的內(nèi)容 -->
{{ todo.text }}
</slot>
</li>
</ul>
`
})
new Vue({
el:'#app',
data:{
todos: [{text: '我是第一項(xiàng)', isComplete: true}, {text: '我是第二項(xiàng)', isComplete:false}]
}
})
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
