自定义事件——this.$emit

zsl2010zsl

已于 2022-05-07 01:06:52 修改

阅读量540

点赞数

文章标签： vue.js javascript 前端

于 2022-05-07 01:04:11 首次发布

本文链接：https://blog.csdn.net/zsl2010zsl/article/details/124622148

版权

数据项在Vue的实例中，但是删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能，很好的帮助我们解决了这个问题：使用this.$emit(‘自定义事件名’, 参数)。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--v-cloak：解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<!--view层 模板-->
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems" :item="item" :index="index" @remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<script>
    // slot：插槽
    Vue.component("todo", {
        template:
            '<div>' +
                '<slot name="todo-title"></slot>' +
                '<ul><slot name="todo-items"></slot></ul>' +
            '</div>'
    });
    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        // 只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove(index) {
                // this.$emit 自定义事件分发
                this.$emit('remove', index) //远程调用Vue里的方法
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                title: "书籍列表",
                todoItems: ['Java', '前端', 'Linux']
            }
        },
        methods: {
            removeItems(index) {
                console.log("删除了" + this.todoItems[index] + "OK");
                this.todoItems.splice(index, 1); // 一次删除一个元素
            }
        }
    })
</script>
</body>
</html>

删除前：
在这里插入图片描述
删除后：

vue单页面应用

基础语法
条件判断：if for
网络通信：axios
组件以及界面布局

zsl2010zsl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义事件——this.$emit

数据项在Vue的实例中，但是删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能，很好的帮助我们解决了这个问题：使用this.$emit(‘自定义事件名’, 参数)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫