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:
                }
            },
            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:,title:"文章标题1",content:"文章内容1..."},
                    {id:,title:"文章标题2",content:"文章内容2..."},
                    {id:,title:"文章标题3",content:"文章内容3..."},
                ],
                blogFontSize:
            }
        })

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

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(,,,.);
            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:,title:"文章标题1",content:"文章内容1..."},
                    {id:,title:"文章标题2",content:"文章内容2..."},
                    {id:,title:"文章标题3",content:"文章内容3..."},
                ],
                blogFontSize:
            }
        })

（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修饰符（待验证）

.

.sync 修饰符