Vue —— $emit 监听子组件事件

最新推荐文章于 2023-06-02 14:06:47 发布

bats421

最新推荐文章于 2023-06-02 14:06:47 发布

阅读量856

点赞数

分类专栏： # Vue 前端文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_43616817/article/details/118720337

版权

本文详细介绍了Vue中子组件如何通过$emit触发事件，以及父组件如何监听并处理这些事件。通过实例展示了如何传递参数，并讨论了在自定义组件上使用$emit的注意事项。

摘要由CSDN通过智能技术生成

vm.$emit( eventName, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

监听子组件事件（官方Demo）

在我们开发 <blog-post> 组件（子组件）时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能：

new Vue({
   
  el: '#blog-posts-events-demo',
  data: {
   
    posts: [/* ... */],
    postFontSize: 1
  }
})

它可以在模板中用来控制所有博文的字号：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key=

关注

专栏目录