vue-solt 插槽

最新推荐文章于 2024-12-23 09:15:21 发布

LeuPener

最新推荐文章于 2024-12-23 09:15:21 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sc0002/article/details/109378953

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div>{{message}}</div>
            <ul>
                <todo-list>
                    <todo-item
                        v-for="item in list"
                        data-test="dd"
                        :title="item.title"
                        :del="item.del"
                        @delete="handleDelete"
                    >
                        <!-- <span slot="pre-icon">前置图标</span> -->
                        <!-- <span slot="suf-icon">前置图标</span> -->
                        <template v-slot:pre-icon="{value}">
                            <span>前置图标 {{value}}</span>
                        </template>
                        <template v-slot:suf-icon>
                            <span>后置图标</span>
                        </template>
                    </todo-item>
                </todo-list>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            // 声明
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false, // 默认值
                },
            },
            template: `<li>
                    <slot name="pre-icon" :value="value"></slot>
                    <span>{{title}}</span>
                    <button v-show="del" @click="handleClick">删除</button>
                    <slot name="suf-icon"></slot>
                </li>`,
            data: function () {
                return {
                    value: Math.random(),
                };
            },
            methods: {
                handleClick() {
                    console.log('del');
                    this.$emit('delete', this.title);
                },
            },
        });
        Vue.component('todo-list', {
            template: `<ul>
               <slot></slot>
            </ul>`,
            data: () => {
                return {};
            },
        });
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hellwo',
                list: [
                    {
                        title: 't1',
                        del: false,
                    },
                    {
                        title: 't2',
                        del: true,
                    },
                ],
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete', val);
                },
            },
        });
    </script>
</html>