P11 自定义事件内容分发 this.$emit(自定义事件,参数)

本文主要是介绍P11 自定义事件内容分发 this.$emit(自定义事件,参数)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<todo>//v-bind:---缩写：<todo-title slot="todo-title" :title="titleData"></todo-title><todo-item slot="todoItem"  v-for="(i,index) in items" v-bind:item="i" :index="index" v-on:remove="removeItems(index)" ></todo-item>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//slot：插槽Vue.component("todo",{template: '<div>' +'<slot name="todo-title"></slot>' +'<ul>' +'<slot name="todoItem"></slot>' +'</ul>' +'</div>'});Vue.component("todo-title",{props: ['title'],template: '<div>{{title}}</div>'});Vue.component("todoItem",{props: ['item','index'],//@是v-on的缩写 只能绑定当前组件的方法template: '<li>{{index}}------{{item}}<button @click="remove">删除</button></li>',methods: {remove: function (index) {//this.$emit("自定义事件",index) 自定义事件分发this.$emit("remove",index)}}});var vm = new Vue({el:"#app",data:{titleData: '这是title',items: ['A','B','C']},methods:{removeItems: function (index) {console.log("删除了"+this.items[index]+"ok");this.items.splice(index,1);//一次删除一个元素}}});
</script></body>
</html>