vue 组件 关闭时触发事件_学习 Vue 的组件自定义事件，子传父的能力【18】

学习要点：1.自定义事件    2..sync 修饰符

本节课我们来开始学习 Vue 的组件自定义事件，子传父的能力。

一．自定义事件

1. 之前学习过 v-on 后面可以接:click 等内置的事件，而组件可以自定义事件；

2. 而自定义事件，可以通过子组件给父组件传递信息的能力；

//下面代码为子组件 html-a 的自定义事件

template : `  

{{name}}

`,methods : { //通过子组件的 click 事件来执行这个方法 //其中 this.$emit 是内置 API，可参考手册 //$emit 表示触发当前实例事件，可附带参数 //参数一是自定义事件，不支持类似 props 驼峰写法 childClick(name) { this.$emit('child-event', name); }}

3. 由于事件名不存在大小写自动转换的问题，所以名称要完全匹配；

PS：可以测试使用多个子组件，让其中一个子组件更改父组件后，看其它子组件的变化；

二．.sync 修饰符

1. 还记得之前强行更改父组件通过 props 传给子组件的计算程序么？

2. 我们强行更改 props 值，控制台报错，且父组件的 data 并没有改变；

3. 通过将 props 的值保存子组件属性，再通过.sync 修饰符更改父组件；

-a v-on:child-event="parentFn">-a>

//这里是父组件的方法

methods : {  parentFn(name) {    console.log('父组件得到子组件的信息！' + name);    this.message = name;  }}

PS：由于单向数据流的概念，让维护清晰；所以 vue2.0 时一度删除.sync 修饰符；虽然在 2.3.0+ 版本又引入回来，使用的时候还是要格外小心，避免混乱。

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！