javascript - 如何在 VueJS 中将对变量的引用传递给方法(而不是变量的值)

Question

在我的模板中，我有这个:

<input @input="myMethod(myVariableName)" />

然后我就有了我的方法

myMethod(variablePassed) {
  console.log(variablePassed)
}

我收到的是“variablePassed”的值(当然)。但是，有没有办法让我查看传递了哪个变量？

Answer 1

是的，您可以通过传递包装在文字对象 {} 内的变量并使用 Object.keys(varname)[0] 获取其名称和 Object.values(varname)[0] 获取其值:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      name: "john"
    }
  },
  methods: {
    myMethod(variablePassed) {
      
      console.log(Object.keys(variablePassed)[0])
       console.log(Object.values(variablePassed)[0])
      
    }
  }
})

#app {
  padding: 20px;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <input @input="myMethod({name})" class="form-control" />
</div>