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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- Android Telephony分析(六) ---- 接口扩展(实践篇)
本文将结合前面五篇文章所讲解的知识,综合起来,实现一个接口扩展的功能.如果还没有阅读过前面五篇文章的内容,请先阅读:<Android Telephony分析(一) — Phone详解 >& ...
- ajax 回传参数
JSONObject json = new JSONObject(); json.put("msg", msg); json.put("success", co ...
- 高级UI晋升之常用View（三）中篇
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从ViewPager来介绍常用View:文章目录 一.简介 二.基本使用 ...
- Python爬虫工程师必学APP数据抓取实战✍✍✍
Python爬虫工程师必学APP数据抓取实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...
- could not load the tomcat server configuration ...
参考文档: https://blog.csdn.net/u013381651/article/details/51567758 问题解决. 原因是你把项目里的tomcat的server项目也关闭了, ...
- Visio2016专业版永久激活码
Visio2016专业版永久激活码: [Key]:NKVJM-8MTT4-8YDFR-6738M-DPFJH [Key]:W9WC2-JN9W2-H4CBV-24QR7-M4HB8 [Key]:7K8 ...
- 修改ie版本为Edge
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> #以上代码告诉IE浏览器,IE8/9及以 ...
- 安装监控MongoDB的Python安装包时候报错：HTTP Error 403: SSL is required
安装pymongo-2.3.tar.gz,执行命令python setup.py install报错: HTTP Error 403: SSL is required 分析原因:安装需要下载这个dis ...
- 我们能从java的HelloWorld学到什么？
这是每个Java程序员都知道的.虽然简单,但是从一个简单的问题可以引入更深的思考.在这篇文章中,我们将讨论这个简单的程序.如果能更多的帮到你,请留下宝贵的意见. HelloWorld.java pub ...
- 依赖背包变形——hdu4003
思维性比较强,代码挺简单的,dp[u][j]表示在u子树下安排j个机器人,让其不回u 注意转移时的初始值 /* dp[u][j]为在子树u有j个机器人不回来 */ #include<bits/s ...