前端开发核心篇——Vue之$emit和$on用法

    在Vue中，我们经常需要进行组件间通信。父组件可以使用 props 把数据传给子组件。当子组件需要对数据进行修改时，就可以使用 $emit 触发父组件的自定义事件。

    1. 父组件：

        <template>
            <div>
                <Input @add="addHandler"/>
                <List :list="list" @delete="deleteHandler"/>
            </div>
        </template>
        
        <script>
        import Input from './Input'
        import List from './List'
        
        export default {
            components: {
                Input,
                List
            },
            data() {
                return {
                    list: [
                        {
                            id: 'id-1',
                            title: '标题1'
                        },
                        {
                            id: 'id-2',
                            title: '标题2'
                        }
                    ]
                }
            },
            methods: {
                addHandler(title) {
                    this.list.push({
                        id: `id-${Date.now()}`,
                        title
                    })
                },
                deleteHandler(id) {
                    this.list = this.list.filter(item => item.id !== id)
                }
            }
        }
        </script>

        此父组件中包含着两个子组件Input和List。在Input组件中我们需要完成给data数据中增加内容；而List组件用来显示并进行删除操作。下面我们就分别来看一下这两个组件。

    2. Input组件

            < template>
                <div>
                    <input type="text" v-model="title"/>
                    <button @click="addTitle">add</button>
                </div>
            </template>
            
            <script>
            export default {
                data() {
                    return {
                        title: ''
                    }
                },
                methods: {
                    addTitle() {
                        // 调用父组件的事件
                        this.$emit('add', this.title)
                        this.title = ''
                    }
                }
            }
            </script>

     当我们点击子组件的add按钮时，会调用父组件的add所绑定的方法addHandler方法，这里会传出我们在输入框中写的文本，并做父组件中增加到data数据中的list中。

3. List组件

            <template>
                <div>
                    <ul>
                        <li v-for="item in list" :key="item.id">
                            {{item.title}}
                            <button @click="deleteItem(item.id)">删除</button>
                        </li>
                    </ul>
                </div>
            </template>
            
            <script>
            export default {
                // props: ['list']
                props: {
                    // prop 类型和默认值
                    list: {
                        type: Array,
                        default() {
                            return []
                        }
                    }
                },
                methods: {
                    deleteItem(id) {
                        this.$emit('delete', id)
                    },
                   
                },
             }
            </script>

        List组件是用来显示父组件传递的数据，并修改的。所以在父组件中会使用：list="list"进行数据传递给子组件。子组件中也定义传输参数props以及类型、默认值等。我们使用v-for进行了渲染，当我们进行删除操作时，我们调用父组件的delete绑定事件deleteHandler方法，并把删除项的id传递给父组件，然后父组件 数据操作。

        以上就是我对vue中$emit和$on用法的示例。