[Vue.js][踩雷篇] Vue v-on:click does not work on component

剛使用 Vue 進行前端開發的項目，往往會碰到一些自己想不到的問題與細節，在 Vue.js 踩雷篇 的主題中進行紀錄：

問題：

• Vue v-on:click does not work on component
• Vue 的 component 上使用 v-on 來綁定 click 等事件沒有反應

情境：

以下為 webpack vue load 的開發環境

template file: button.vue

<template lang="html">
  <button>按鈕</button>
</template>

<script>
export default{
 name: 'button'
}
</script>

main file : main.vue

<template lang="html">
 <div>
   <navButton @click="alertMsg"></navButton>
 </div>
</template>

<script>
import navButton from './button'

export default{
  name: 'main',
  components:{
    navButton
  },
  methods:{
    alertMsg () { alert("click event is happen")}
  }
}
</script>

你會發現 on:click 這個事件下的 function 是不會被執行的

解決方法：

在 @click 後面，加上 native 的屬性如下：

<navButton @click.native="alertMsg"></navButton>

组件想在子组件上监听自己的click的话，需要加上native修饰符，故寫法就像上面这样

使用 屬性 prop 傳遞方法給子組件

template file: button.vue

<template lang="html">
  <button @click="emitClick">按鈕</button>
</template>

<script>
export default{
  props: {
    fn: {
      type: Function
    }
  },
  methods: {
    emitClick () {
      this.$emit('click', this.fn)
    }
  }
}
</script>

main file : main.vue

<template lang="html">
 <div>
   <navButton @click="alertMsg"></navButton>
 </div>
</template>

<script>
import navButton from './button'

export default{
  name: 'main',
  components:{
    navButton
  },
  methods:{
    alertMsg () { alert("click event is happen")}
  }
}
</script>

在 Vue render 的週期內，自己註冊 on:click 的事件：

template file: button.vue

<script>
export default {
  render (creatElement) {
    return creatElement('button', {
      on: {
        click: () => this.$emit('click')
      }
    }, this.msg)
  }
}
</script>

main file : main.vue

<template lang="html">
 <div>
   <navButton @click="alertMsg"></navButton>
 </div>
</template>

<script>
import navButton from './button'

export default{
  name: 'main',
  components:{
    navButton
  },
  methods:{
    alertMsg () { alert("click event is happen")}
  }
}
</script>

以上的方法都是 Vue v-on:click does not work on component 的解決方案，目標都是一樣的，在這邊提供 3 個方式供參考

(完)