Vue.js的事件綁定 - 內建事件綁定、自訂事件綁定

這次帶給大家Vue.js的事件綁定- 內建事件綁定、自訂事件綁定，使用Vue.js的事件綁定- 內建事件綁定、自訂事件綁定的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

可以簡寫為

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

內建事件綁定

#阻止冒泡的事件

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

常用的事件修改器 :keydown

@keydown輸入框輸入內容或內容變更都會觸發執行

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

#透過指定修改器@keydown.enter當敲擊鍵盤enter時觸發執行
也可以採用keycode : 如,@keydown.13;獲得相同的效果

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

自訂事件綁定

自訂事件綁定一般用在自定義元件上
在自訂元件a.vue上程式碼如下

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

在呼叫的元件中

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js的清單資料的同步更新方法

Vue.js的清單渲染v -for 陣列物件子元件

Vue.js的文字渲染

使用Vue.js有哪些注意事項

#

以上是Vue.js的事件綁定 - 內建事件綁定、自訂事件綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！