时间戳

首页 > 解决方案 > 如何在Vue中将参数绑定到子函数

javascript - 如何在Vue中将参数绑定到子函数

问题描述

在 React 中，通常为子组件绑定参数，如下所示：

<Child onChange={e =>
  doThing(complex.variable.inParentScope[3], e.target.value)} foo="bar" />

我想在 Vue 中做类似的事情，以使子组件尽可能愚蠢（它应该只需要调用onClick={(e) => onChange(e)}。但是，我读到将函数作为道具传递通常是 Vue 中的反模式，我想不通我应该如何绑定来自父级的参数以保持代码可重用。我想做类似的事情：

[1,2,3,4,5,dataFromAPI].map(data =>
  <Child change="e => handleChange(data, foo, e.target.value) />

这是如何实现的？

标签： javascriptvue.js

解决方案

恕我直言，将函数传递给孩子没有任何问题。它不是您在 Vue 中经常看到的模式的原因是因为 Vue 提供$emit(). 这是一个例子：

Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
  template: `<input @change="$emit('some-event', $event.target.value)" />`,
});

new Vue({
  el: '#app',
  data: () => ({
    myList: [1, 2, 3]
  }),
  methods: {
    someFn(item, index, value) {
      console.log({item, index, value});
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <child v-for="(item, index) in myList"
         :key="index"
         @some-event="someFn(item, index, $event)" />
</div>

子组件尽可能地保持哑（它不知道它是列表的一部分，它不知道它index并且它不知道父组件在value它发出后对其做了什么）。它所需要知道的只是它自己的价值以及它何时需要$emit()它。

注意$emit()不会冒泡。如果您需要影响深远的替代方案，请考虑分派/提交到商店或使用事件总线。

推荐阅读