Vue.js学习---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，因为代码太长就不贴过来，大家可以随意写一点，供自己观察就行

子组件中代码：

<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>

 

<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也是一样的。