我们知道父组件是使用props传递数据给子组件，如果子组件要把数据传递回去，怎么办？ 那就是要自定义事件！使用v-on绑定自定义事件 每个Vue实例都实现了事件接口（Events interface）, 即 使用$on(eventName) 监听事件 $emit(eventName) 触发事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

        <!--<script src="../vue2.1.6.js"></script>-->

        <link rel="stylesheet" href="styles/demo.css" />

    </head>

    <body><div id="app">

            <table>

                <tr>

                    <th colspan="3">父组件数据</th>

                </tr>

                <tr>

                    <td>名字</td>

                    <td>{{name}}</td>

                    <td><input type="text" v-model="name" /></td>

                </tr>

                <tr>

                    <td>年龄</td>

                    <td>{{age}}</td>

                    <td><input type="text" v-model="age" /></td>

                </tr>

            </table>

            <my-component :my-name="name" :my-age="age" @change-name="setName" @change-age="setAge"></my-component>

        </div>

        <template id="myComponent">

            <table>

                <tr>

                    <th colspan="3">子组件数据</th>

                </tr>

                <tr>

                    <td>名字</td>

                    <td>{{myName}}</td>

                    <td><input type="text" v-model="myName" /></td>

                </tr>

                <tr>

                    <td>年龄</td>

                    <td>{{myAge}}</td>

                    <td><input type="text" v-model="myAge" /></td>

                </tr>

            </table>

        </template>

        <script>

            var vm = new Vue({

                el: "#app",

                data: {

                    name: "小明",

                    age: 24

                },

                components: {

                    'my-component': {

                        template: "#myComponent",

                        props: ["myName", "myAge"],

                        watch: { //监听外部对props属性myName,myAge的变更

                            myName: function(val) {

                                this.$emit("change-name", val) //组件内对myName变更后向外部发送事件通知

                            },

                            myAge: function(val) {

                                this.$emit("change-age", val) //组件内对myAge变更后向外部发送事件通知

                            }

                        }

                    }

                },

                methods: {

                    setName: function(val) {

                        this.name = val; //外层调用组件方法注册变更方法，将组件内的数据变更，同步到组件外的数据状态中

                    },

                    setAge: function(val) {

                        this.age = val;

                    }

                }

            })

        </script>

    </body>

</html>

vue2.0自定义事件的更多相关文章

  1. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  2. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  3. vue2.0 之事件处理器

    事件绑定v-on(内置事件) <template> <div> <a v-if="isPartA">partA</a> <a ...

  4. cocos2d 3.0自定义事件答疑解惑

    疑惑一:在事件分发中修改订阅者 ,对于这个的理解. 事件的分发是可以嵌套的,cocos2dx使用_inDispatch来保存当前嵌套的深度,当调用第一个dispatchEvent的时候,_inDisp ...

  5. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

  6. vue2.0 自定义过滤器

    2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...

  7. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

  8. vue2.0 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  9. vue2.0 自定义 折叠列表（Accordion）组件

    1.自定义  折叠列表 Accordion.vue (1)sass  版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...

随机推荐

  1. scrapy框架的解析

    1,scrapy框架的官网:https://scrapy.org/ 什么是scrapy框架: scrapy 是一个为了爬取网站数据,提取结构性数据而编写的应用内框架,非常出名,所谓框架就是一个已经继承 ...

  2. iOS开发——高级篇——线程保活

    线程保活: 顾名思义,就是保护线程不死(保证线程处于激活状态,生命周期没有结束) 正常情况,当线程执行完一次任务之后,需要进行资源回收,也就意味着生命周期结束 应用场景: 当有一个任务,随时都有可能去 ...

  3. 契约式设计 契约式编程 Design by contract

    Design by contract - Wikipedia https://en.wikipedia.org/wiki/Design_by_contract What is the use of & ...

  4. 内部消息 微软中国云计算 内測Azure免费账号 赶紧申请 错过不再有

    内部消息 微软中国云计算 顶级内測Azure免费账号 火热申请 过期不再有! 微软MSDN俱乐部  29754721, [一大波Azure免费账号来袭]Windows Azure再次开启示放免费试用账 ...

  5. （2）MyEclipse怎么关联本地Tomcat服务器

    1,在MyEclipse中点击服务器按钮: 2,选择“Configure Server” 3,在弹出面板中选择 [Servers]-[Tomcat]-[对应版本的服务器] 5,看上图,先选择Enabl ...

  6. 使用buildroot搭建linux文件系统【转】

    本文转载自:http://blog.csdn.net/metalseed/article/details/45423061 (文件系统搭建,强烈建议直接用buildroot,官网上有使用教程非常详细b ...

  7. oracle中的sys用户(修改密码)/////Oracle删除表空间的同时删除数据文件 ///// Oracle中如何保证用户只有一个session登录

    oracle中的sys用户(修改密码) (2011-07-01 09:18:11) 转载▼ 标签: it 分类: oracle 概念: SYS用户是Oracle中权限最高的用户,而SYSTEM是一个用 ...

  8. 分拆数&&HDU4651

    1,有两种DP,复杂度都是O(N^2),但是浪费的侧重点不同,所以根据侧重点分块DP,复杂度可以降到O(N^1.5). 2,母函数+五边形blabla... 占位. 其实就是母函数拆开后,快速知道哪些 ...

  9. MultipartResolver实现文件上传功能

    转自:https://www.jb51.net/article/142736.htm springMVC默认的解析器里面是没有加入对文件上传的解析的,,使用springmvc对文件上传的解析器来处理文 ...

  10. 洛谷 P3621 [APIO2007]风铃【贪心】

    没有算法,但是要注意细节. 首先无解的情况,显然的是最小深度的叶子节点和最大深度的叶子节点的深度差大于1:还有一种比较难想,就是如果一个点的左右子树都有最大和最小深度的叶子节点,这样交换左右子树也不行 ...