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

巴特西

vue组件---自定义事件

`.sync` 修饰符

最新文章

热门文章

巴特西

vue组件---自定义事件

.sync 修饰符

最新文章

热门文章

`.sync` 修饰符