原创

vue中$emit的使用

vue中组件是重要的一部分,因为有各自的作用域,所以父子组件之间的值传递也很重要;

在初期接触父子组件的值传递时,个人接触到最多的是prop,主要是父组件给子组件静态传值;

但是在处理提问增加标签问题时,子组件也需要给父组件传值;

$emit实现子组件向父组件通信,绑定一个自定义事件event,语句被执行到的时候,就会将参数arg传递到父组件,父组件通过@event监听并接收参数。

在这里将标签输入框封装为一个组件,在输入框中删除或者点击时,需要将对应的值传给父组件;

输入框中删除标签还好,此处直接绑定'input'事件,将对应值返回父组件;

delTag(tag, index) {
  this.tags.splice(index, 1);
  tag.isSelected = false;
  this.$emit('input', this.tags);
},

但是,此处还需要聚焦时展示标签下拉框,标签下拉框的展示通过 showTagList 控制,那么子组件输入框focus状态下,就需要改变showTagList的值为true。此处子组件可以通过$emit触发父组件的自定义事件。

在父组件定义事件,并绑定

updateShowTag(data) {
  this.showTagList = data;
},

子组件上触发事件

tagShow() {
  this.$emit('showTags', true);
},

这样就可以保证子组件的操作动态传递给父组件了~

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

相关文章

  • React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

    高阶组件(higher-order components:以下简称HOC或HOC组件)是一个React组件复用的高级技巧。HOCs本身并不是React的API接...

    随风溜达的向日葵
  • 解密传统组件间通信与React组件间通信

    在React中最小的逻辑单元是组件,组件之间如果有耦合关系就会进行通信,本文将会介绍React中的组件通信的不同方式

    前端迷
  • 《精通react/vue组件设计》之5分钟实现一个Tag(标签)组件和Empty(空状态)组件

    本文是笔者写组件设计的第五篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动"...

    徐小夕
  • 这么定义Vue组件你就赢了

    什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组...

    DataScience
  • 蘑菇街、滴滴、淘宝、微信的组件化架构解析,附源码Demo和PDF

    随着移动互联网的不断发展,很多程序代码量和业务越来越多,现有架构已经不适合公司业务的发展速度了,很多都面临着重构的问题。

    搜云库技术团队
  • 【课堂笔记】先行者 3.0版本的vueJs课程的第三次课

    今次是vue课程的第3次课,内容大体上是: 一、事件; 在vue当中,事件是使用v-on指令,它可以定义一个方法来调用。 语法: <input v-on:...

    web前端教室
  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

    蓓蕾心晴
  • 可视化搭建数据大屏系统的前端实现

    本文首发于政采云前端团队博客:可视化搭建数据大屏系统的前端实现 https://www.zoo.team/article/data-visualization

    政采云前端团队
  • Vue 与 React 父子组件之间的家长里短

    FinGet
  • vue-cli脚手架使用

            components:{App}//注册的组件 名称来自import引入时的名字

    余生

扫码关注云+社区

领取腾讯云代金券