Vue.js event binding - built-in event binding, custom event binding

This time I will bring you the Events of Vue.jsBinding - built-in event binding, custom event binding, event binding using Vue.js - built-in event binding, customization What are the precautions for event binding? The following is a practical case, let’s take a look.

<button v-on:click="toggle">切换</button>

can be abbreviated as

<button @click="toggle">切换</button>

Built-in event binding

Prevent bubbling events

<button @click.stop="toggle">切换</button>

Commonly used eventsModifier :keydown

@Keydown input box input content or content changes will trigger execution

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

By specifying the modifier @keydown.enter, execution will be triggered when the keyboard enter is hit
Keycode can also be used : For example, @keydown.13; obtain the same effect

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

Custom event binding

Custom event binding is generally used on self-defined componentsThe code on the custom component a.vue is as follows

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>

In the called component

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Recommended reading:

Synchronous update method of list data in Vue.js

List rendering v in Vue.js -for array object subcomponent

Text rendering of Vue.js

What are the precautions for using Vue.js

The above is the detailed content of Vue.js event binding - built-in event binding, custom event binding. For more information, please follow other related articles on the PHP Chinese website!