vue 插槽之list

元素分离

 <div id="todoDemo">
        <todo-list v-bind:filtered-list="myList">
            <template v-slot:default="{ info }">
                <span v-if="info.isDone">√</span>
                {{ info.name }}
            </template>
        </todo-list>
    </div>

    <script>
        Vue.component('todo-list', {
            props: ['filteredList'],
            template: `
            <ul>
                <li v-for="item in filteredList" v-bind:key="item.name">
                    <slot v-bind:info="item"></slot>
                </li>
            </ul>`
        })
        let app = new Vue({
            el: '#todoDemo',
            data() {
                return {
                    myList: [{
                        isDone: true,
                        name: 'Tom'
                    }, {
                        isDone: false,
                        name: 'John'
                    }, {
                        isDone: false,
                        name: 'Red'
                    }]
                }
            }
        })
    </script>

注意点

数据传递

1. 首先就是数据传递，我是用html写的页面，所以需要区分props在html中需要使用kebab-case，在JS中需要使用camelCase

<todo-list v-bind:filtered-list="myList">
...
props: ['filteredList'],

2. 区分每一个元素代表的意思，<slot name="default" v-bind:info="item">{{ item.name }}</slot> 这里的name表示具名插槽，v-bind: 后面跟随的父子交互所用名（info)，item则对应所在子组件的位置中的具体元素；假如设置默认值，需要使用子组件的名称。
3. 最后就是父元素中的使用；v-slot:后面跟随slot的name，采用大括号可以直接写父子组件间交互所用名info；之后info就可以和父组件的变量同样使用了，但只能在该标签域内。

 <template v-slot:default="{ info }">
     <span v-if="info.isDone">√</span>
     {{ info.name }}
 </template>