前端开发核心篇——Vue之$emit和$on用法
【摘要】 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用法的示例。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)