Vue学习--自定义事件内容分发

最新推荐文章于 2023-06-09 18:46:36 发布

Cr_Wr

最新推荐文章于 2023-06-09 18:46:36 发布

阅读量175

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39525744/article/details/108790020

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<body>
    <div id="app">
        <booklist>
            <titleslot slot="titleslot" v-bind:title="vmtitle"></titleslot>
            <itemslot slot="itemslot" v-for="(item,index) in vmItem" :item="item" v-bind:index="index" v-on:vremove="vmremove"></itemslot>
        </booklist>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("booklist",{
            template: '<div>\
                         <slot name="titleslot"></slot>\
                            <ul>\
                         <slot name="itemslot"></slot>\
                            </ul>\
                       </div>'
        });
        Vue.component("titleslot",{
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        Vue.component("itemslot",{
            props: ['item','index'],
            template: '<li>-{{index}}--------{{item}}<button @click="remove">删除</button></li>',
            methods: {
                remove: function () {
                    //this.$emit 自定义事件分发
                    this.$emit('vremove',this.index);
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                vmtitle: "图书列表",
                vmItem: ['book1','book2','book3']
            },
            methods: {
                vmremove: function (index) {
                    console.log("删除"+this.vmItem[index]+"成功！"+"---"+index)
                    this.vmItem.splice(index,1);
                }
            }
        })
    </script>
</body>

Cr_Wr

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--自定义事件内容分发

<body> <div id="app"> <booklist> <titleslot slot="titleslot" v-bind:title="vmtitle"></titleslot> <itemslot slot="itemslot" v-for="(item,index) in vmItem" :item="item" v-bind:index="index.
复制链接

扫一扫