vue.js - Vue.js 组件的动态点击处理程序？

Question

我一直在开发一个通用的 Field 组件，用于我正在开发的 Vue 网络应用程序中的表单。例如，在我的 EditProduct 组件中，我有 Field 组件的多个实例，其中一些类型为“复选框”，一些类型为“文本”等。实际上，复选框变体所做的是生成如下内容:

<div class="col-xs-2">
    <label>
        <input id='organic' name='organic' type="checkbox" v-model="product.organic"/>&nbsp;Organic
    </label>
</div>

来自这里:

<field :cols="2" name="organic" v-model="product.organic" type="checkbox"></field>

这很简单，但显示了总体思路。我希望能够做的是将类似“更改”处理程序函数名称的内容作为 Prop 传递，如下所示:

<field :cols="2" name="organic" v-model="product.organic" type="checkbox" change="this.handleSomething"></field>

这将调用 EditProduct 组件中的函数。不过，我不确定如何让它发挥作用。我的 Field 组件中已经有一个更改处理程序方法，它可以发出通知事件:

methods: {
    handleCheckbox: function (event) {
        this.$emit('input', event.target.checked);
        if(this.change){
           //do something here...
        }

    }
}, 

我的想法是在这里测试 'change' Prop 是否存在，然后做一些事情，但此时我所拥有的只是一个包含函数名称的字符串。我如何实际使用它来调用函数，最好使用从 $event 派生的参数(例如 $event.target.checked，比如说)？

Answer 1

使用 $emit 和 v-on 在 child 与 parent 之间进行交流

不是传入处理程序，而是在内部值更改时从 Field 组件发出事件。然后，使用 v-on ，您可以为该事件注册一个处理程序。

Here is the documentation for $emit .用法:this.$emit('event-name', arguments...)

Here is the documentation for v-on .用法:<component v-on:event-name="handler">

---

同样在输入元素上使用 v-on

您还可以使用 v-on为默认事件注册处理程序。例如，input元素将触发 change更改时的事件。因此，

<input type="checkbox" v-on:change="onChange"/>

会导致onChange当复选框更改时触发。请注意，参数会自动传递到处理程序中。所以，在这种情况下，事件被传递到 onChange .

---

例子

这是一个将所有内容放在一起的示例。在这个例子中我们看到

• 一个field包含单个复选框的组件。它触发 change更改复选框时的事件，并传递给 event.target.checked
• 具有两个事件处理程序的根 vue 实例。他们期望一个 bool 值(event.target.checked 的结果)
• 在 html 中，两个 field组件被创建。每个人都使用不同的处理程序

Vue.component('field', {
  template: '#field',
  data: function() {
    return {
      value: null
    }
  },
  methods: {
    onChange: function(event) {
      // emit a change event
      // Provide event.target.checked as an argument
      this.$emit('change', event.target.checked);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    selected1: false,
    selected2: false
  },
  methods: {
    changeHandler1: function(selected) {
      this.selected1 = selected;
    },
    changeHandler2: function(selected) {
      this.selected2 = selected;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <p>Selected1: {{selected1}}</p>
  <p>Selected2: {{selected2}}</p>
  
  <!-- Register a handler for the 'change' event -->
  <field v-on:change="changeHandler1"></field>
  <field v-on:change="changeHandler2"></field>
</div>

<template id="field">
  <!-- 
       By default, the input element fires a change event  
       when it is modified. The event is automatically passed  
       into the handler. 
  -->
  <input type="checkbox" v-on:change="onChange"/>
</template>