Vue知识点总结(17)——作用域插槽（超级详细）

之前分别了解了匿名插槽和具名插槽。
这期我们的任务是作用域插槽。
作用域插槽虽然用的不多，但是还是挺重要的。

我们以一个实际需求来展示作用域插槽，因为作用域插槽用的确实不多，只能在实际需求中展示它的意义。

需求：

已经开发了一个待办事项列表的组件,很多模块都在用
A B
之前数据格式和引用接口不变,正常显示
新功能模块增加对勾

需求解释起来有点模糊，到时候看页面的内容就知道咋回事了。

html">   <div id="app">
        <App></App>
    </div>

  <script>
        const todoList = {
            data () {
                return {
                    
                }
            },
            props: {
                todos:Array,
                defaultValue:[]
            },
            template:`
                <ul>
                    <li v-for='item in todos' :key='item.id'>
                        <slot :itemValue = 'item' ></slot>
                        {{item.title}}
                    </li>
                </ul>
            `
        }
        const App = {
            data () {
                return {
                    todoList:[{
                        title:'大哥你好么',
                        isComplate:true,
                        id:1
                    },{
                        title:'小弟我还行',
                        isComplate:false,
                        id:2
                    },{
                        title:'你在干什么',
                        isComplate:false,
                        id:3
                    },{
                        title:'抽烟喝酒烫头',
                        isComplate:true,
                        id:4
                    }]         
                }
            },
            components: {
                todoList
            },
            template:`
                <todoList :todos='todoList'>
                    <template v-slot='data'>
                        <label>{{data}}</label>
                        <input type='checkbox' v-model='data.itemValue.isComplate' />
                    </template>
                </todoList>
            `
        }
        new Vue({
            el:'#app',
            data:{

            },
            components: {
                App
            }
        });
    </script>

首先我们写了一个局部组件todoList。然后比较重要的东西就是props，这个东西我们之前在组件通信里面已经讲过了。然后template模板中，写了一个ul，li的v-for循环，循环的是props里面拿到的todos集合。

li的内容，我们依然看到了插槽标签slot，然后在slot标签的属性上，我们写了一个 :itemValue=‘item’，这个东西我们暂且先搁置，等看完下面这个组件再来说这里这个 **:itemValue=‘item’**的作用。

我们还写了一个App局部组件，在这个组件的data中，我们写了一个todoList数组对象，用于到时候页面的内容展示。
components属性中挂载todoList组件。
template模板中的内容很重要，要重点看一下。

首先我们调用todoList这个组件，在组件的属性上，写了 :todos=‘todoList’，这个是用来组件间通信传值的，不懂的同学可以翻看一下前面的内容。:todos='todoList’对应props: [‘todos’]。作用就是把App组件中的todoList数组对象传给todoList组件。

然后在todoList组件的内部，我们写了一个template标签占据插槽的位置，这个和前面的具名插槽有点类似。在template标签上，还写了一个v-slot=‘data’，可能很多同学不知道这个data是干什么的。所以我们在页面中会输出一下这个data的内容，这个和我们的需求实现是没有任何关系的，只是为了方便同学们了解这个data中到底有哪些东西。
再之后，就是一个input标签展示数据了。

先看一下页面渲染出来的东西吧。
在这里插入图片描述
我们可以看到，首先渲染出来了一组对象，这个就是v-slot='data’中data的内容。这也是我们前面提到的todoList组件中，:itemValue='item’的itemValue是哪儿来的了。这个并不是固定的，这个名字可以随便改。我把它改成Value之后，页面的内容也可以正常的渲染。
在这里插入图片描述