VUEJS在@Click Events中使用箭头功能

Question

我正在使用箭头函数在@Click上运行多个事件，如下所示：

<btn @click="()=> {variable = "5"; 
myFunction(variable); 
myFunction2('something'); 
$emit('argument', myFunction3())}"
>Run functions!</btn>

我想知道这是否是安全的/良好的做法？

如果不是，为什么？我可以要求任何参数吗？

Answer 1

tl; dr 一般而言，箭头函数 work 在事件处理程序中(并不意味着您应该使用它们，请参见下文(。

---

但是，首先，您的示例代码int问题是行不通的：

new Vue({
  el: '#app',
  methods: {
  	myFunction() {},
    myFunction2() {},
    myFunction3() {},
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>
  
  <button @click="()=> {variable = "5"; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"
  >Run functions!</button>
  
  </p>
</div>

您可以看到，问题是"5"中的"关闭属性。

---

第二：如果您修复了"(请参见下文(，则代码不会像您认为认为确实如此一样工作。使用variable时：

@click="()=> {variable = "5"; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"

它不是该范围的局部变量。预计将是组件中的属性(例如data或计算属性(。

要在本地使用，您必须使用var，let或const：

正确声明它

new Vue({
  el: '#app',
  data: {},
  methods: {
  	myFunction(a) { console.log("myFunction", a) },
    myFunction2(a) { console.log("myFunction2", a) },
    myFunction3() { console.log("myFunction3") },
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>
  
  <button @click="()=> {let variable = '5'; myFunction(variable);  myFunction2('something');  $emit('argument', myFunction3())}"
  >Run functions!</button>
  
  </p>
</div>

最终和最重要的点。这种实践导致代码更难维护。

这是在模板中具有逻辑的不必要方法。这样做的标准方法只是创建一种方法并从模板中调用它。

演示：

new Vue({
  el: '#app',
  data: {},
  methods: {
    myMethod() {
      let variable = '5';
      this.myFunction(variable);
      this.myFunction2('something');
      this.$emit('argument', myFunction3())
    },
  	myFunction(a) { console.log("myFunction", a) },
    myFunction2(a) { console.log("myFunction2", a) },
    myFunction3() { console.log("myFunction3") },
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>
  
  <button @click="myMethod">Run functions!</button>
  
  </p>
</div>