vue组件---自定义事件
首先简单回顾下组件事件及组件的复用
demo1：按钮事件
<div class="button_area"> <button-area></button-area> <button-area></button-area> <button-area></button-area> </div> <script type="text/javascript"> // 1、注册组件 Vue.component('button-area',{ data:function(){ return { count:0 } }, template:`<button v-on:click="count++">您点击了{{count}}次</button>` }) // 2、实例化，构建组件模板 new Vue({ el:".button_area" }) </script>
demo2：监听子组件事件
在开发 <event-area> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。在其父组件中，可以通过添加一个 blogFontSize数据属性来支持这个功能：
new Vue({ el:".event_area", data:{ blogs:[ {id:1,title:"文章标题1",content:"文章内容1..."}, {id:2,title:"文章标题2",content:"文章内容2..."}, {id:3,title:"文章标题3",content:"文章内容3..."}, ], blogFontSize:1 } })
它可以在模板中用来控制所有博文的字号：
v-bind:style="{fontSize:blogFontSize+'em'}"
接下来添加按钮，点击放大字体。当点击这个按钮时，需要告诉父级组件放大所有博文的文本。Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM （本地DOM）事件一样通过 v-on 监听子组件实例的任意事件：
v-on:add-size="blogFontSize+=0.1"
子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发这个事件
Vue.component('event-area',{ props:['blog'], template:`<div class="blog_show_area"> <p>标题：{{blog.title}}</p> <p>内容：{{blog.content}}</p> <button v-on:click="$emit('add-size')">放大字体</button> </div>` });
有了这个 v-on:add-size="blogFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 blogFontSize 的值。完整代码
<div class="event_area"> <event-area v-for="blog in blogs" v-bind:key="blog.id" v-bind:blog="blog" v-bind:style="{fontSize:blogFontSize+'em'}" v-on:add-size="blogFontSize+=0.1" ></event-area> </div> <style type="text/css"> .blog_show_area{ padding: 20px; background-color: rgba(0,0,0,.3); border: 1px solid red; margin: 10px; } </style> Vue.component('event-area',{ props:['blog'], template:`<div class="blog_show_area"> <p>标题：{{blog.title}}</p> <p>内容：{{blog.content}}</p> <button v-on:click="$emit('add-size')">放大字体</button> </div>` }); new Vue({ el:".event_area", data:{ blogs:[ {id:1,title:"文章标题1",content:"文章内容1..."}, {id:2,title:"文章标题2",content:"文章内容2..."}, {id:3,title:"文章标题3",content:"文章内容3..."}, ], blogFontSize:1 } })
（1）事件名
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 addSize名字的事件：
组件template里： <button v-on:click="$emit('addSize')">放大字体</button>
则监听这个名字的 kebab-case （短横线隔开式）版本是不会有任何效果。
<event-area v-for="blog in blogs" v-bind:key="blog.id" v-bind:blog="blog" v-bind:style="{fontSize:blogFontSize+'em'}" v-on:add-size="blogFontSize+=0.1" ></event-area>
<!--没有效果-->
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。因此，推荐始终使用 kebab-case 的事件名。
测试：这里使用PascalCase （小驼峰式）版本命名调用
父级组件： v-on:addSize="blogFontSize+=0.1" 子级模板中： <button v-on:click="$emit('addSize')">放大字体</button>
此时，控制台输出警告
翻译：
请注意，HTML属性不区分大小写，并且在使用in-DOM模板时不能使用v-on来侦听camelCase事件。 您应该使用“add-size”而不是“addSize”。
（2）自定义组件的v-model（待验证）
（3）将原生事件绑定到组件（待验证）
（4）.sync修饰符（待验证）
.
