Vue.js组件的动态单击处理程序？

Question

我一直在开发一个通用的Field组件,用于我正在开发的Vue Web应用程序中的表单.例如,在我的EditProduct组件中,我有Field组件的多个实例,其中一些类型为'checkbox',一些'text'等.有效的复选框变体的作用是生成如下内容:

<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>

这很简单,但显示了一般的想法.我希望能够做的是传递像'更改'处理函数名称作为道具的东西,如下所示:

<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...
        }

    }
}, 

我的想法是在这里测试"更改​​"道具的存在然后做一些事情,但此时我所拥有的只是一个包含函数名称的字符串.我如何实际使用它来调用一个函数,最好使用派生自$ event的参数(例如$ event.target.checked)？

Answer 1

使用$ emit和v-on从子节点到父节点进行通信

当内部值发生更改时,不会传入处理程序,而是从Field组件中发出事件.然后,使用v-on,您可以为该事件注册处理程序.

这是$ emit的文档.用法:this.$emit('event-name', arguments...)

这是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实例.他们期望一个布尔值(结果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>