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，您可以为该事件注册处理程序。

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实例。他们期望一个布尔值（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>

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

1 个答案:

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

也在输入元素

实施例