查看“Vue从入门到实战:监听子组件事件”的源代码
←
Vue从入门到实战:监听子组件事件
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
子组件的某些功能需要和父组件进行通信,应该如何实现呢 ? 在Vue.js中,这是通过自定义事件来实现的。子组件使用$emit()方法触发事件,父组件使用v-on指令监听子组件的自定义事件。 $emit()方法的语法形式如下: vm.$emit(eventName,[...args]) eventName是事件名,args是附件参数,如果子组件需要向父组件传递参数,就可以通过第二个参数来传。 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件: <nowiki><button v-on:click="$emit('enlarge-text')"> Enlarge text </button></nowiki> 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件: <nowiki><blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post></nowiki> ==举例== 设计两个组件来实现一个BBS项目 PostList负责整个帖子列表的渲染, PostListItem负责单个帖子的渲染。“点赞”按钮在子组件中,为了向父组件通知点击事件,可以使用自定义事件的方式。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> // 父组件 Vue.component('PostList', { data() { return { posts: [ {id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0}, {id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0}, {id: 3, title: '《Vue.js无难事》怎么样', author: '王五', date: '2019-11-11 15:22:03', vote: 0} ] } }, methods: { // 自定义事件vote的事件处理器方法 handleVote(id){ this.posts.map(item => { item.id === id ? {...item, voite: ++item.vote} : item; }) } }, template: ` <div> <ul> <PostListItem v-for="post in posts" :key="post.id" :post="post" @vote="handleVote(post.id)"/> <!--监听自定义事件--> </ul> </div>` }); // 子组件 Vue.component('PostListItem', { methods: { handleVote(){ // 触发自定义事件 this.$emit('vote'); } }, props: ['post'], template: ` <li> <p> <span>标题:{{post.title}} | 发帖人:{{post.author}} | 发帖时间:{{post.date}} | 点赞数:{{post.vote}}</span> <button @click="handleVote">赞</button> </p> </li>` }); new Vue({ el: '#app' }) </script> </body> </html></nowiki> ==将原生事件绑定到组件==
返回至
Vue从入门到实战:监听子组件事件
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息