代码之家 › 专栏 › 技术社区 › void

在Vue中调用方法时使用括号

vuejs2 vue.js javascript

void · 技术社区 · 6 年前

在Vue中,为什么可以使用 () 而且没有 () ?

new Vue({
  el: "#app",
  data: {
    userName: "Hello World!"
  },
  methods: {
    changeName: function(e){
      this.userName = "Name "+Math.random();
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <p> {{ userName }} </p>
  
  <!-- typing in both the input fields trigger changeName  -->
  
  <input @input="changeName()">
  <input @input="changeName">
  
</div>

在上面的代码片段中,两个输入字段上的输入事件都会触发 changeName 很好,尽管周围有括号 () 但有一个没有。

1 回复 | 直到 6 年前

Jacob Goh 6 年前

这在 https://vuejs.org/v2/guide/events.html#Method-Event-Handlers .

基本上,事件处理程序可以是

方法名,例如 @input="changeName"
有效的javascript语句,例如 @input="changeName()" 或 @input="userName = 'Name '+Math.random()"

Vue自动执行检查以检测是哪种情况。

如果你感兴趣,请在 https://github.com/vuejs/vue/blob/19552a82a636910f4595937141557305ab5d434e/dist/vue.js#L10086 .

var handlerCode = isMethodPath
  ? ("return " + (handler.value) + "($event)")
  : isFunctionExpression
    ? ("return (" + (handler.value) + ")($event)")
    : handler.value;

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前