在Vue.js中什么是內(nèi)聯(lián)處理器？

我知道內(nèi)聯(lián)語句，這樣說的話也就是say()，這算一個內(nèi)聯(lián)處理器。say('hi')這也是一個內(nèi)聯(lián)處理器。但是say不算。

比較一下這兩個寫法有什么不同：

寫法一

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function () {
      alert('hello');
    }
  }
});

寫法二

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
});

差異

一個有括號，一個沒括號，對吧？

沒括號的這個，直接就是函數(shù)名，有括號的這個，實際是一條JS語句，有括號的這個就叫『內(nèi)聯(lián)處理器』。

沒括號的好處

看上去，有括號的更直觀，更容易理解。那為什么還要搞什么無括號？

沒括號的有這么一個好處：

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (event) {
      alert(event.target.tagName);
    }
  }
});

雖然我沒括號，但我天生自帶event參數(shù)呀，你在上面不用寫event，我下面就自帶event了，你有括號的括號里幾個參數(shù)，下面就得幾個參數(shù)，你不能無中生有的。

有括號的逆襲

為了讓有括號的也能得到無括號娘胎里自帶的event參數(shù)，我們可以這樣寫：

<div id="example-3">
  <button v-on:click="say('hi', $event)">Say hi</button>
  <button v-on:click="say('what', $event)">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message, event) {
      alert(message);
      alert(event.target.tagName);
    }
  }
});

送他一個美刀$，于是有括號的也可以快樂地使用天然無雕飾的event參數(shù)了！