自定义组件

vue对象实现数据删除

    var vue = new Vue({
        el: "#app",
        data: {
            titledata: '恨劫的博客',
            henjieitems: ['JavaSE','JavaEE','JavaME']
        },
        methods: {
            removeItems: function (index){
                this.henjieitems.splice(index,1);	//传入1个下标，删除这个下标的元素
            }
        }
    });

splice(x,y,"1","2")表示从下标为x开始，删除y个元素，并添加字符串 ‘1’ 和 ‘2’。

结果呈现

如图所示，删除了JavaEE元素。

通过组件完成删除操作 —> 参数传递

<henjie-items slot="henjie-items" v-bind:item="itemdata" v-bind:index="indexno" v-for="(itemdata,indexno) in henjieitems"></henjie-items>

    Vue.component('henjie-items',{
        props: ['item','index'],
        template: '<li>{{index}}----{{item}}<button>删除</button></li>',  //只能绑定当前组件的方法
    });

因为在组件henjie-items内，只能调用本组件的方法，因此想要定义删除方法，需要先给组件传递下标值，

v-for可以遍历出元素，当然也可以遍历出下标，所以定义indexno来接收下标，

组件henjie-items要接收下标，需要在props中再定义一个参数index，

在模板中通过v-bind绑定index参数来接收indexno的下标，如此下标便成功传入到了组件内，剩余的就是定义方法了。

结果展示：

通过组件完成删除操作 —> 自定义组件

数据项在vue实例中，但删除操作要在组件中完成，那么怎样怎样在组件内删除vue中的数据呢？

需要用到参数传递和事件分发。

参数传递详见上例，

自定义事件分发：this.$emit('自定义事件名',参数)

        <henjie-items slot="henjie-items" v-bind:item="itemdata" v-bind:index="indexno"
                      v-for="(itemdata,indexno) in henjieitems"
                      v-on:re="removeItems(indexno)" ></henjie-items>

在模板中自定义事件命名为re，因为模板中定义的事件可以调用vue实例中的方法，所以将re绑定removeItems(indexno)。

事件绑定后需要被触发，因为我们要通过组件中的按钮button触发事件，所以要将re绑定进组件中。

    Vue.component('henjie-items',{
        props: ['item','index'],
        template: '<li>{{index}}----{{item}}<button v-on:click="remove">删除</button></li>',  
        											//只能绑定当前组件的方法
        methods: {
            remove: function (index){
                //绑定模板中的事件，re为模板中自定义的事件名
                this.$emit('re',index);
            }
        }
    });

在组件内定义方法remove，通过this.$emit('re',index);跟模板中的事件绑定起来，这里 index 已经在上例中通过props接收。

至此，参数传递和事件分发已完成

对 0—JavaSE 点击删除

发现可以成功删除。