<template> <div> <!-- 能保证 v-model 可以在最底层组件使用。通过将底层的事件往上传,而不是在中间层修改 --> <input v-bind="$attrs" :value="value" v-on="inputListeners" /> <!-- 这个会报错: mutate props --> <!-- <input v-model="value"> --> </div> </template> <script> export default { name: "Myinput", props: { value: { type: Number, default: 2333, }, }, computed: { inputListeners: function() { var vm = this; console.log(this.$listeners.input); // 从调用 <myinput @input /> 而来 // `Object.assign` merges objects together to form a new object return Object.assign( {}, // We add all the listeners from the parent // 不会覆盖父组件的listener。是怎么通知父组件的呢?this是谁? // 比如 <myinput @focus />, <input @focus='focus' />, 被调用时,会触发??? this.$listeners, // Then we can add custom listeners or override the // behavior of some listeners. { // This ensures that the component works with v-model input: function(event) { vm.$emit("input", +event.target.value); }, } ); }, }, }; </script>