vue组件之emit

关键词：emit

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

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

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

Vue.component('button-counter', {
  template: `
  {{ counter }}`,
  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
    }
  }
})

  
{{ total }}
  
  

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

---

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

Vue.component('currency-input', {
  template: `
    
      $
      
    
  `,
  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:''
  }
})

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

应为