vue父子组件传参学习
2018-03-20 00:26
405 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> </head> <body> <div id="app"> <p>{{total}}</p> <click-add v-on:handleclick="addTotal"></click-add> <click-add v-on:handleclick="addTotal"></click-add> </div> <script> Vue.component('click-add',{ template:'<button v-on:click="handle">{{count}}</button>', data:function(){ return { count:0 } }, methods:{ handle:function(){ this.count +=1; this.$emit('handleclick'); } } }) var app = new Vue({ el:"#app", data:{ total:0 }, methods:{ addTotal:function(){ this.total +=1; } } }) // 1.父子组件传参 使用 v-on监听事件 ,使用$emit触发事件; // 2. 在子组件中使用驼峰命名函数名时,事件注册不上。 </script> </body> </html>
相关文章推荐
- VUE2.0父子组件以及非父子组件通信传参详解
- vue学习(四):子组件向父组件传参
- vue.js使用props在父子组件之间传参
- vue学习笔记--父子组件通信
- vue 通过下拉框组件学习vue中的父子通讯
- Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序
- Vue2.0学习之详解Vue 组件及父子组件通信
- vue.js 2.0父子组件学习入门套路
- vue.js 2.0父子组件学习入门套路(推荐相关阅读)
- vue学习记录——父子组件间传递数据
- vue学习18:非父子组件间的传值(bus/总线/发布订阅者模式/观擦者模式)
- Vue.js入门学习--父子组件的说明和简单通信(十)
- vue.js2.0父子组件间传参 (一)实现弹窗
- vue.js学习笔记(三)--父子组件通信总结
- Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
- Vue 进阶教程之:非父子组件通信方法(非Vuex)
- vue学习五 router-link传参以及参数的使用
- vue2.X组件学习心得(新手必看篇)
- vue组件学习