H5W3
当前位置:H5W3 > 其他技术问题 > 正文

在Vue.js中什么是内联处理器?

在文档中 内联处理器中的方法

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

请问下内联处理器是指的什么呢?

回答:

比较一下这两个写法有什么不同:

写法一

<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);
    }
  }
});

差异

一个有括号,一个没括号,对吧?

没括号的这个,直接就是函数名,有括号的这个,实际是一条JS语句,有括号的这个就叫『内联处理器』。

没括号的好处

看上去,有括号的更直观,更容易理解。那为什么还要搞什么无括号?

没括号的有这么一个好处:

<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参数呀,你在上面不用写event,我下面就自带event了,你有括号的括号里几个参数,下面就得几个参数,你不能无中生有的。

有括号的逆袭

为了让有括号的也能得到无括号娘胎里自带的event参数,我们可以这样写:

<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参数了!

回答:

我知道内联语句,这样说的话也就是say(),这算一个内联处理器。say('hi')这也是一个内联处理器。但是say不算。

回答:

今天遇到了一个错误:vue infinite update loop

排查了一下发现是因为我用JSX进行列表渲染时用这种内联表达式给子组件绑定了事件。

JSX处理时不会在外层给你包层方法,这也算是JSX与模板语法的差异之一。

本文地址:H5W3 » 在Vue.js中什么是内联处理器?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址