},
{
test:'代办1',
id:123123123423423
},
{
test:'爱你地方年底见覅',
id:12312313123234234
},
{
test:'时间2',
id:1231231312323333
},
{
test:'师生情是行情',
id:12313333333
}
] }
},
components: {
todoList
}
}
</script>
展示效果
步骤
为了实现代办事项增加对勾效果，我们要在data中调整数据结构，新增
todosAfter 数组,并给每一项增加
isComplete 标识。
todosAfter:[
{
test:'询问时间',
isComplete:true,
id:12312313123
},
{
test:'代办1',
isComplete:false,
id:123123123423423
},
{
test:'爱你地方年底见覅',
isComplete:false,
id:12312313123234234
},
{
test:'时间2',
isComplete:true,
id:1231231312323333
},
{
test:'师生情是行情',
isComplete:true,
id:12313333333
}
],理解插槽和数据传递
自己在看别人的帖子比较吃力的地方就是弄不清楚这个插槽作用域到底是什么，有什么功能，我用大白话来屡屡思路。 弄清楚两个问题
插槽solt代码在哪里编写？ 当然在父组件内， solt是子组件暴露给父组件的接口，需要父组件传给子组件 。
插槽作用域，作用域插槽字面理解，仅仅只对插槽生效。
那传递步骤是
父组件把数据给子组件，父=>子
子组件把数据给插槽,并暴露给父组件接口
父组件调用子组件的插槽slot接口和数据
我们之前给数据数据增加了
isComplete 属性，现在要将子组件
item 传递给插槽,并给父组件暴露数据接口
itemValue ，重点在
v-bind:itemValue = "item" 这一句 。
<template>
<ul>
<li v-for="item in todoList" v-bind:key="item.id">
<slot v-bind:itemValue = "item" >
{{ item.test }}
</slot>
</li>
</ul>
</template>接下来是父组件调用子组件的slot和
itemValue 数据。
<h2>之前组件调用</h2>
<todo-list v-bind:todos="todosAfter">
