vue 父子组件传递数据
单向数据流：
数据从父级组件传递给子组件，只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。
解决方法： 可以使用data将父组件传递过来的数据拷贝一份存放起来，再修改拷贝的数据就可以了
//用data来解决不能修改父组件传递的数据的问题，
// 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
data:function(){
return {
number: this.count
}
},
数据就可以修改了：
methods:{
handleclick:function() {
this.number=this.number+2;
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
}
}
我们使用$emit触发chang方法，在父组件的模版中监听chang方法，最后在Vue实例中调用
（１）
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
（２）
<counter :count="1" @change="handleIncreae"></counter>
（３）
var vm=new Vue({
el:'#shuju',
data:{
total:3
},
components:{
counter:counter
},
methods:{
handleIncreae:function(step) {
this.total+=step;
}
}
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传值</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="shuju" >
<counter :count="2" @change="handleIncreae"></counter>
<counter :count="1" @change="handleIncreae"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
//用data来解决不能修改父组件传递的数据的问题，
// 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
data:function(){
return {
number: this.count
}
},
template:'<div @click="handleclick">{{number}}</div>',
methods:{
handleclick:function() {
this.number=this.number+2;
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
}
}
};
var vm=new Vue({
el:'#shuju',
data:{
total:3
},
components:{
counter:counter
},
methods:{
handleIncreae:function(step) {
this.total+=step;
} }
})
</script>
</body>
</html>
效果：
2018-05-15 21:47:17
vue 父子组件传递数据的更多相关文章
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue2中component父子组件传递数据props的使用
子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...
- vue父子组件传递参数之props
vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...
- vue兄弟组件传递数据
在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- scala 集合类型
Iterable 是序列(Seq), 集(Set) 映射(Map)的特质 序列式有序的集合如数组和列表 集合可以通过== 方法确定对每个对象最多包含一个 映射包含了键值映射关系的集合 列表缓存: 使用 ...
- 如何发现 Redis 热点 Key ，解决方案有哪些？
Java技术栈 www.javastack.cn 优秀的Java技术公众号 来源:http://t.cn/EAEu4to 一.热点问题产生原因 热点问题产生的原因大致有以下两种: 1.1 用户消费的数 ...
- CF#537 C. Creative Snap /// DFS
题目大意: 给定n k A B为位置长度 复仇者个数 两种花费 在一段为1~2^n的位置中 某些位置存在一些复仇者 求消灭所有复仇者的最小花费 对一段位置可以有两种处理方式 1.若该段长度至少为2 可 ...
- USACO 2001 OPEN earthquake /// 最优比例生成树
题目大意: https://www.cnblogs.com/forever97/p/3603572.html 讲解:https://www.jianshu.com/p/d40a740a527e 题解: ...
- echart 柱状图背景色设置
方法一: series: [ { name: '1', type: 'bar', itemStyle: {//柱图背景色 color: '#111' }, data: list }, { name: ...
- Box-Cox变换
简介 编辑 Box-Cox变换的一般形式为: 式中 为经Box-Cox变换后得到的新变量, 为原始连续因变量, 为变换参数.以上变换要求原始变量 取值为正,若取值为负时,可先对 ...
- struts2类型转换1
概述 从一个 HTML 表单到一个 Action 对象, 类型转换是从字符串到非字符串. HTTP 没有 “类型” 的概念. 每一项表单输入只可能是一个字符串或一个字符串数组. 在服务器端, 必须把 ...
- Centos6.5升级安装openssh7.7p1
Centos6.5升级安装openssh7.7p1 关于OpenSSH漏洞 2016年1月14日OpenSSH发布官方公告称, OpenSSH Client 5.4~7.1 版本中未公开说明的功 ...
- vue-cli搭建vue开发环境
前置环境 npm install -g vue-cli vue list 已安装环境后: vue init webpack sell 建立项目名称sell----------------------- ...
- Batch - FOR %%a %%b
总结 %%a refers to the name of the variable your for loop will write to. Quoted from for /?: FOR %vari ...