[前端笔记] Vue之v-on绑定监听子组件传来的事件

Vue中经常会用到v-on指令来绑定一个事件，那么它具体什么时候调用，什么时候使用呢？

父组件中使用了v-on:editItem="editObject"和v-on:removeItem="removeObject"两个监听，代码如下

 

<v-list-box:key="props.item.documentNo"slot="listBox"slot-scope="props":item="props.item":items="props.items":index="props.index"v-on:editItem="editObject"v-on:removeItem="removeObject">

 

父组件中有两个方法，名为editObject和removeObject，因为代码太长就不贴过来，大家可以随意写一点，供自己观察就行

 

子组件中代码：

html

 

<divclass="box-toolspull-right">
<buttontype="button"class="btnbtn-box-tool"data-widget="collapse"><iclass="fafa-plus"></i></button>
<buttontype="button"class="btnbtn-box-tool"@click.submit.prevent="edit"><iclass="fafa-pencil"></i></button>
<buttontype="button"class="btnbtn-box-tool"@click.submit.prevent="remove"><iclass="fafa-times"></i></button>
</div>

 

 js

 

<script>
export default {
  name: 'VListBox',
  props: ['item', 'index', 'items'],
  data () {
    return {}
  },
  methods: {
    add () {
      this.$emit('addItem')
    },
    edit () {
      // 此事件仅仅供父组件VListPage使用
      this.$parent.$emit('_editItem', this.item)

      this.$emit('editItem', this.item)
    },
    remove () {
      this.$emit('removeItem', this.item)
    }
  }
}
</script>

 

 

 

大家请看，我们子组件当执行了edit方法时，通过$emit('editItem', this.item) 这个方法去父组件中去寻找editItem这个方法，然后调用它，在父组件中editItem实现。

 

当然remove也是一样的。