vue slot

Slots are used to transfer the contents of complex, similar methods
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="app">
        < TODO-List > 
            < TODO Item- v-for = "Item in classList" : title = "item.title" : Prize = "item.prize" > 
                ! <- distribution of content, similar to java aop it inside 
                // slot usage later version 2.5 -> 
                < Template V-slot: pre-icon > 
                        < span > pre-slot </ span > 
                </ Template > 
                ! <- version 2.5 before usage -> 
                < span slot = "SUF-icon" > rear slot </ span > 
            </todo-item>
        </todo-list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            props: {
                title: String,
                prize: {
                    type: Number,
                    default: 40
                },
            },
            //默认插槽
            template: `<li>
            <slot name="pre-icon"></slot>
            <button>删除</button>
                课程名:{{title}}
                价格:{{prize}}
                <slot name="suf-icon"></slot>
                <slot><span>默认插槽</span></slot>
            </li>`,
            data: function () {
                return {
                    
                }
            },
            methods: {
            }
        })
        Vue.component('todo-list', {
            template: `
            <ul>
            <slot ></slot>
        </ul>
            `,

            data: function () {
                return {

                }
            }
        })
        var vm = new Vue({
            el: '.app',
            data: {
                message: 'World Hello ' 
            },, 
                ShowMessage: to false , 
                title: " Delete " , 
                classList: [ 
                        { 
                            title: ' course. 1 ' , 
                            Prize: 50 

                        }, 
                        { 
                            title: ' courses 2 ' , 
                            Prize: 80 
                        } 
                    ] 
            Methods: { 
            }, 
        })
    </script>
</body>

</html>
vue slot usage (Geeks Vue time video notes)

vue slot

Guess you like
