vue组件之emit

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName)触发事件

Vue.component('button-counter', {  template: `  <button v-on:click="increment">{{ counter }}</button>`,  data() {    return {      counter: 0    }  },  methods: {    increment: function () {      this.counter += 1      this.$emit('increment')    }  },});new Vue({  el: '#example',  data: {    total: 0  },  methods: {    incrementTotal: function () {      this.total += 1    }  }})

<div id="example">  <p>{{ total }}</p>  <button-counter v-on:increment="incrementTotal"></button-counter>  <button-counter v-on:increment="incrementTotal"></button-counter></div>

通过以上代码发现，就是子组件自定义了个事件，然后把这个事件发射出去，父组件应用这个事件，就实现了

---

官网还提供了另一个有意思的例子

Vue.component('currency-input', {  template: `    <span>      $      <input        ref="input"        v-bind:value="value"        v-on:input="updateValue($event.target.value)"      >    </span>  `,  props: ['value'],  methods: {    updateValue: function (value) {      var formattedValue = value        // 删除两侧的空格符        .trim()        // 保留 2 小数位        .slice(0, value.indexOf('.') + 3)      // 如果值不统一，手动覆盖以保持一致      if (formattedValue !== value) {        this.$refs.input.value = formattedValue      }      this.$emit('input', Number(formattedValue))    }  }})new Vue({  el: '#example',  data: {    price:''  }})

   <div id="example">      <currency-input v-model="price"></currency-input>    </div>

注意这里的v-moel是个语法糖

    <input v-model="something">

应为

    <input v-bind:value="something" v-on:input="something = $event.target.value">

作者：ferrint
链接：http://www.jianshu.com/p/2e29f6e8800b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。