vue------自定义事件分发

最新推荐文章于 2024-06-15 14:41:39 发布

春风霓裳

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量359

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43470725/article/details/122636922

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

参考：https://cn.vuejs.org/v2/guide/components-custom-events.html
当想在组件里面调用vue对象并操作他，比如删除数据中的数组元素，因该怎么办？
在这里插入图片描述

如图：要实现删除功能
代码演示：

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

</head>
<body>

<div id="vue">

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

</div>
<!--1、导入axiose-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--1、导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">

<!--    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: function (index){
                //this.$emit自定一事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
       el: '#vue',
        //data属性
        data: {
            title: "狂老师列表",
            todoItems: ['春风霓裳','平凡之路','哈哈哈']
        },
        methods: {
            removeItems: function (index){
                console.log('删除了' + this.todoItems[index]);
                this.todoItems.splice(index,1);//一次删除一个元素（splice()：js语法，删除数组元素）
            }
        }

    });
</script>


</body>
</html>

分析：

vue有三大板块构成：vue对象、vue组件、前端视图层
了解：
在组件里面移掉vue的对象，也就是在组件里面操作vue
vue和前端mvvm模式，双向绑定
Vue通过element和前端页面绑定
组件通过插槽和前端绑定
由于组件里面不能直接操作vue对象里面的东西，但是前端却可以和另外两个模块关联，所以就要通过绑定前端方法，然后调用vue里面的方法去操作vue的东西
在这里插入图片描述
前端：

<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>

vue组件的插槽：

Vue.component(“todo-items”,{
props: [‘item’,‘index’],
//只能绑定当前组件的方法
template: ‘

{{index}}—{{item}} <button @click=“remove”>删除
’,
methods: {
remove: function (index){
//this. $e m i t 自定一事件分发 t h i s .$ emit(‘remove’,index);
}
}
});

vue对象：
```
var vm = new Vue({
   el: '#vue',
    //data属性
    data: {
        title: "狂老师列表",
        todoItems: ['春风霓裳','平凡之路','哈哈哈']
    },
    methods: {
        removeItems: function (index){
            console.log('删除了' + this.todoItems[index]);
            this.todoItems.splice(index,1);//一次删除一个元素（splice()：js语法，删除数组元素）
        }
    }

});
```
可以看到：
前端通过

注意这里，前端自定义方法 remove="removeItems(index)”通过v-on:绑定组件插槽，然后通过"removeItems(index)"调用vue里面的方法，然后去操作vue里面的值！！
组件绑定前端的方法：
this. $e m i t 自定一事件分发 t h i s .$ emit(‘remove’,index);

春风霓裳

关注

0
点赞
踩
1

收藏

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

参考：https://cn.vuejs.org/v2/guide/components-custom-events.html当想在组件里面调用vue对象并操作他，比如删除数据中的数组元素，因该怎么办？如图：要实现删除功能代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></he
复制链接

扫一扫