编辑
Vue.js 组件的自定义事件可以让子组件向父组件传递数据,非常方便实用。在使用自定义事件时,我们可以使用 v-on 来绑定事件,每个 Vue 实例都实现了事件接口,即使用 $on(eventName) 监听事件和使用 $emit(eventName) 触发事件。此外,在父组件中,我们可以使用 v-on 来监听子组件触发的事件。
下面是一个示例,子组件和它外部完全解耦,只需要触发一个父组件关心的内部事件:
如果要监听某个组件的根元素上的原生事件,可以使用 .native 修饰 v-on。
另外,组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,可以通过 model 选项指定当前的事件类型和传入的 props。
以下是一个示例,父组件的 num 的初始值是 100,更改子组件的值能实时更新父组件的 num:
总的来说,Vue.js 组件的自定义事件和 v-model 机制非常强大,能够让我们更加方便地进行组件间的数据交互。需要注意的是,在使用自定义事件时,我们应该避免出现命名冲突,以免产生不必要的错误。同时,在使用 v-model 时,我们也要注意传入的 props 和事件名的对应关系。
领取专属 10元无门槛券
私享最新 技术干货