Vue组件自定义事件父子

Vue组件父子之间自定义事件

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了

示例代码

<div id="zjw1">
    <span>CQNU--重庆ZJW--同学span>
    <input placeholder="张俊Wei请输入内容" v-model="Value">
    <button @click="add">添加button>
    <ul>
        <todo-item
                v-for="(item,index) in list"
                :key="index"
                :content="item"
                :index="index"
                @del="Delete">
        todo-item>
    ul>
    <span>当前有{{ list.length}}项未完成span>
div>
<template id="com">
    <li>{{content}}  <button @click="zjw">删除button>li>
template>
<script>
    Vue.component('TodoItem',{
        props:['content','index'],
        template:`#com`,
        methods:{
            zjw:function(){
                this.$emit('del',this.index)
            }
        }
    })

    new Vue({
        el:"#zjw1",
        data:{
            Value:'',
            list:[],
        },
        methods:{
            add:function(){
                this.list.push(this.Value);
                this.Value='';
            },
            Delete:function(i){
                this.list.splice(i,1);
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

简单分析

我们创建了一个全局组件TodoItem将其中的template中button绑定一个自定义事件del

<button @click="zjw">删除button>
1

            zjw:function(){
                this.$emit('del',this.index)
            }
1
2
3

在父组件中@del="Delete"就可以转到vue的methods中的Delete方法，从而进行删除了。

Delete:function(i){
                this.list.splice(i,1);
            }
1
2
3

同时用list.length来记录list中的个数

<span>当前有{{ list.length}}项未完成span>
1

效果演示