vue插槽

插槽是用来传递复杂的内容，类似方法
<!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">
                <!--分发内容，类似java里面的aop吧
                //2.5版本以后的插槽用法-->
                <template v-slot:pre-icon>
                        <span>前置插槽</span>
                </template>
                <!--2.5版本之前用法-->
                <span slot="suf-icon">后置插槽</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: 'hello world',
                showMessage: false,
                title: "是否删除",
                classList: [
                        {
                            title: '课程1',
                            prize: 50

                        },
                        {
                            title: '课程2',
                            prize: 80
                        }
                    ]
            },
            methods:{
            },
        })
    </script>
</body>

</html>
vue插槽用法(极客时间Vue视频笔记)

vue插槽

猜你喜欢
