作用域插槽
2019-03-18 本文已影响0人
时光经年
就是让插槽渲染出不同的东西(简单来说就是把父级的数据传到子组件，再从子组件传回父组件，让插槽内容有点不同)
<!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}">
<!-- 为待办项自定义一个模板，-->
<!-- 通过 `slotProps` 定制每个待办项。-->
<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">
<!-- 回退的内容 -->
{{ todo.text }}
</slot>
</li>
</ul>
`
})
new Vue({
el:'#app',
data:{
todos: [{text: '我是第一项', isComplete: true}, {text: '我是第二项', isComplete:false}]
}
})
</script>
