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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="../vue2.2.js"></script>
  7.         <!--<script src="../vue2.1.6.js"></script>-->
  8.         <link rel="stylesheet" href="styles/demo.css" />
  9.     </head>
  10.     <body><div id="app">
  11.             <table>
  12.                 <tr>
  13.                     <th colspan="3">父组件数据</th>
  14.                 </tr>
  15.                 <tr>
  16.                     <td>名字</td>
  17.                     <td>{{name}}</td>
  18.                     <td><input type="text" v-model="name" /></td>
  19.                 </tr>
  20.                 <tr>
  21.                     <td>年龄</td>
  22.                     <td>{{age}}</td>
  23.                     <td><input type="text" v-model="age" /></td>
  24.                 </tr>
  25.  
  26.             </table>
  27.             <my-component :my-name="name" :my-age="age" @change-name="setName" @change-age="setAge"></my-component>
  28.         </div>
  29.         <template id="myComponent">
  30.             <table>
  31.                 <tr>
  32.                     <th colspan="3">子组件数据</th>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>名字</td>
  36.                     <td>{{myName}}</td>
  37.                     <td><input type="text" v-model="myName" /></td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>年龄</td>
  41.                     <td>{{myAge}}</td>
  42.                     <td><input type="text" v-model="myAge" /></td>
  43.                 </tr>
  44.             </table>
  45.         </template>
  46.         <script>
  47.             var vm = new Vue({
  48.                 el: "#app",
  49.                 data: {
  50.                     name: "小明",
  51.                     age: 24
  52.                 },
  53.                 components: {
  54.                     'my-component': {
  55.                         template: "#myComponent",
  56.                         props: ["myName", "myAge"],
  57.                         watch: { //监听外部对props属性myName,myAge的变更
  58.                             myName: function(val) {
  59.                                 this.$emit("change-name", val) //组件内对myName变更后向外部发送事件通知
  60.                             },
  61.                             myAge: function(val) {
  62.                                 this.$emit("change-age", val) //组件内对myAge变更后向外部发送事件通知
  63.                             }
  64.                         }
  65.                     }
  66.                 },
  67.                 methods: {
  68.                     setName: function(val) {
  69.                         this.name = val; //外层调用组件方法注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
  70.                     },
  71.                     setAge: function(val) {
  72.                         this.age = val;
  73.                     }
  74.                 }
  75.             })
  76.         </script>
  77.     </body>
  78.  
  79. </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. C#生成Excel文件后彻底解除占用代码（来着CSDN）

    http://bbs.csdn.net/topics/280078428 jy251 LS说KILL进程的朋友们···我说...你们真行!!!如果用户是administrator还行,如果不是怎么办? ...

  2. debian包之间的关系

    1 debian包之间存在两大类关系 第一,依赖 第二,冲突 2 依赖类关系 2.1 depends 2.2 pre-depends 2.3 recommends 2.4 suggests 2.5 e ...

  3. mysql 查看编码方式

    一. 查看数据库的字符集 show variables like 'character\_set\_%'; 输出: +--------------------------+--------+ | Va ...

  4. 【Linux 内核网络协议栈源码剖析】网络栈主要结构介绍（socket、sock、sk_buff，etc）

    原文:http://blog.csdn.net/wenqian1991/article/details/46700177 通过前面的分析,可以发现,网络协议栈中的数据处理,都是基于各类结构体,所有有关 ...

  5. RK3288-OTA编译失败解决办法【转】

    本文转载自:http://blog.csdn.net/wangxueming/article/details/52448630 在执行make  otapackage的时候出现该错误,是由于drmsi ...

  6. 集成到Buildroot中的Helloword程序【转】

    本文转载自:http://www.openloongson.org/forum.php?mod=viewthread&tid=85 本帖最后由 gt945 于 2015-7-5 17:06 编 ...

  7. YTU 2928: 取不重复的子串。

    2928: 取不重复的子串. 时间限制: 1 Sec  内存限制: 128 MB 提交: 5  解决: 5 题目描述 输入字母构成的字符串(不大于30字符)从中读取3个不重复的字符,求所有取法,取出的 ...

  8. 【POJ 1947】 Rebuilding Roads

    [题目链接] 点击打开链接 [算法] f[i][j]表示以i为根的子树中,最少删多少条边可以组成j个节点的子树 树上背包,即可 [代码] #include <algorithm> #inc ...

  9. JVM垃圾回收面试题

    Java垃圾回收有个经典面试题,什么时候,对什么对象,做了什么操作? 垃圾回收里涉及内容很多,要准确回答这个问题首先要先限定边界.分清楚虚拟机规范定义和不同虚拟机实现的差异.以工作中用到的hotspo ...

  10. context:property-placeholder作用

    原文地址:http://blog.sina.com.cn/s/blog_a0de59cf0101dqeb.html spring去加载,这个元素的写法如下: <context:property- ...