Vue自定义事件内容分发

最新推荐文章于 2024-02-28 18:04:22 发布

月亮的-影子

最新推荐文章于 2024-02-28 18:04:22 发布

阅读量311

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_46388866/article/details/113573147

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue自定义事件内容分发

这个案例也是狂神老师的。
现在说一下这个this. $e m i t (^{'} 方法^{'} ，^{'} 参数^{'}), 这个触发自定义事件，而自定义事件需要在组件的头上面写 v - o n : 命名（^{'} 想要调用的方法^{'} ）。看上去非常复杂，其实不然，多练习几次会发现，只需要注意 p r o p s 的参数，方法参数的添加，写好方法名就可以了。其实它只不过就是组件调用 v u e 里面的方法删除数据罢了，通过视图的一个小操作，相当于是给 V u e . c o m p o n e n t 和 V u e 对象做一个连接，也就是这个 v - o n 就是一个连接，而$ emit只是触发连接，调用方法而已。

需要注意问题：

如果有参数，别忘了在方法和props里面加上参数
v-bind的意思其实就是绑定参数，告诉你这个是参数而已
请注意methods这些标签的书写
别忘记写数据在data上
自定义的标签别写错

下面是狂神老师总结的简图：
在这里插入图片描述
这样一来就清晰很多了。这里也发现了vue的操作很繁琐。需要多写。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <tobo>
        <tobo-title slot="title" :title="title"></tobo-title>
<!--        v-bind用于绑定参数，传入方法里面-->
        <tobo-items slot="items" v-for="(item,index) in items" v-bind:item="item"
                    v-bind:index="index" v-on:remove="removeItems(index)"></tobo-items>
    </tobo>

</div>

<script>
    Vue.component("tobo",{
        template:'<div>\
           <slot name="title"></slot>\
           <ul>\
             <slot name="items"></slot>\
           </ul>\
        </div>'
    })

    Vue.component("tobo-title",{
        props:['title'],
        template:"<div>{{title}}</div>"
    });

    Vue.component("tobo-items",{
        props:['item','index'],
        template:"<li>{{index}}----{{item}}<button @click='remove'>删除</button></li>",
        methods:{
            remove:function(index){
                this.$emit('remove',index);
            }
        }
    });

    var vue=new Vue({
        el:"#app",
        data:{
            title:"好人",
            items:['sss','aaa','bbb']
        },
        methods:{
            removeItems:function(index){
                //删除items里面的数据
                console.log("删除"+index);
                this.items.splice(index,1);
            }
        }
    });

</script>

</body>
</html>

月亮的-影子

关注

0
点赞
踩
0

收藏

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

Vue自定义事件内容分发这个案例也是狂神老师的。现在说一下这个this.emit(′方法′，′参数′),这个触发自定义事件，而自定义事件需要在组件的头上面写v−on:命名（′想要调用的方法′）。看上去非常复杂，其实不然，多练习几次会发现，只需要注意props的参数，方法参数的添加，写好方法名就可以了。其实它只不过就是组件调用vue里面的方法删除数据罢了，通过视图的一个小操作，相当于是给Vue.component和Vue对象做一个连接，也就是这个v−on就是一个连接，而emit('方法'，'参数'),这个
复制链接

扫一扫