Vue学习（9）自定义事件-CSDN博客

本文详细介绍如何在Vue中使用自定义组件，并演示了如何通过组件调用父级的事件处理函数，实现子组件与父组件之间的数据交互。具体包括组件的创建、属性绑定、插槽使用以及事件触发和监听等核心概念。

前端绑定vue
前端绑定组件
通过组件调用vue中的事件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <toto>
        <toto-title slot="toto-title" :title="title"></toto-title>
        <toto-items slot="toto-items" v-for="(item,index) in totoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></toto-items>
    </toto>
</div>


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

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

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

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

    var vm = new Vue({
        el: "#app",
        data :{
            title: "列表",
            totoItems: ['狂神说JAVA','狂神说前端','狂神说Linux']
        },
        methods: {
            removeItems: function (index) {
                this.totoItems.splice(index,1);
            }
        }
    });
</script>

</body>
</html>