vue中$emit的使用

2020-04-16 19:07:43 浏览数 (1)

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

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

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

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

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

子组件上触发事件

代码语言：javascript复制

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

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

0 人点赞