vuejs父子组件的数据传递
<div id='root'>
<counter :count = '1'></counter>
<counter :count = '2'></counter>
</div> <script>
var counter = {
props:['count'],
template:'<div>{{count}}</div>'
}
var vm = new Vue({
el:'#root',
components:{
counter: counter
}
})
</script>
var counter = {
props:['count'],
template:'<div @click="handleClick">{{count}}</div>',
methods:{
handleClick:function(){
this.count ++
}
}
}
var counter = {
props:['count'],
data:function(){
return {
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number ++
}
}
}
<div id='root'>
<counter :count = '3' @change = 'handleChange'></counter>
<counter :count = '2' @change = 'handleChange'></counter>
<div>{{total}}</div>
</div> <script>
var counter = {
props:['count'],
data:function(){
return {
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number += 2;
this.$emit('change',2);
}
}
}
var vm = new Vue({
el:'#root',
data:{
total:5
},
components:{
counter: counter
},
methods:{
handleChange:function(step){
this.total += step;
}
}
})
vuejs父子组件的数据传递的更多相关文章
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- react组件的数据传递
在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...
- vue 2.x之组件的数据传递(一)
这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- Vuejs——(9)组件——props数据传递
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- VUE ---(9)组件——props数据传递
本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅 ...
随机推荐
- JWT(JSON Web Token)原理简介
原文:http://www.fengchang.cc/post/114 参考了一下这篇文章:https://medium.com/vandium-software/5-easy-steps-to-un ...
- my.资料收集_20170912
1.终于摸索出平民单开赚钱方法了!![梦幻西游手游吧]_百度贴吧.html http://tieba.baidu.com/p/5323468885?see_lz=1 1.http://tieba.ba ...
- Oracle 12c DG备库Alert报错ORA-01110
环境是12.2.0.1 version, Oracle Data Guard备库近段时间一直报错,但是备库主库同步一致,数据一致. 2019-03-06T23:42:22.184048+08:00 E ...
- linux下pid命令
ps aux | grep tomcat| awk '{if(NR==1)print $2}' Linux:批量修改分隔符(awk.BEGIN.FS.OFS.print.tr命令) 批量修改文件的分 ...
- MyCnblog Style
以下内容添加到页脚HTML代码处 <style> #leftmenu ul { display: none; } .cnblogs-markdown pre code, .cnblogs- ...
- Kure讲HTML_HTML界面结构
1.HTML界面结构: 通常通过html开发的网页,它有一个自己固定的书写格式(类似于写信的时候也有固定的格式) <!-- DOCTYPE用来告诉浏览器用当前html文档是用html的哪个版本编 ...
- ecshop点击订购、加入按钮没反应的解决方法
今天做ecshop站的时候,测试数据,发现点击订购.加入按钮都没反应,网上搜索,有些人说是修改了common.js,我将原始版本复原也没反映.后来重新安装ecshop,仔细研究发现,原来头部文件pag ...
- IA-32e架构下的内核初始化内存管理
初级内存管理单元 关于内存的分页 以往的物理页是按照4KB进行分配和管理的, 而在Linux之后流行的就是2MB大小的物理页的分配和管理, 整个物理内存管理单元也是2MB物理页管理的 先获取基本的物理 ...
- [转]在离线环境中发布.NET Core至Windows Server 2008
本文转自:http://www.cnblogs.com/durow/p/5765145.html 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面 ...
- mysql 将null转代为0(转)
1.如果为空返回0 select ifnull(null,0) 2.如果为空返回0,否则返回1 select if(isnull(col),0,1) as col. MYSQL 中的IFNULL函数 ...