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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- Java jar文件
JAR(Java Archive)是基于ZIP文件格式的文件格式. 它用于捆绑Java应用程序或小程序的资源,类文件,声音文件,图像等. 它还提供数据压缩.一个JAR文件作为一种特殊类型的ZIP文件. ...
- nfs下的exportfs命令和nfs客户端重新挂载
工作中,如果使用了nfs服务器,会遇到修改nfs服务器配置的情况,如果想重新让客户端加载上修改后的配置,但是又不能重启rpcbind服务,我们需要使用export命令了 exportfs命令 常用选项 ...
- MonkeyTalk使用方法
1.简单介绍 MonkeyTalk软件测试工具由两部分构成:MonkeyTalk IDE 和 MonkeyTalk Agents MonkeyTalk IDE是Eclipse平台的工具,工能是:对iO ...
- Django -- 高级知识点
Django -- 高级知识点 高级知识点包括: 静态文件处理 中间件 上传图片 Admin站点 分页 使用jquery完成ajax 管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 ...
- JavaWeb学习篇之----自定义标签&&JSTL标签库详解
今天来看一下自定义标签的内容,自定义标签是JavaWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面 ...
- centos 服务器编译安装apache+php
1.检查服务器中是否自带httpd,如果/etc/httpd/httpd.conf,说明系统自带httpd服务,需要卸载或关闭服务,不要让他影响到本次安装的服务启动 可以用 service httpd ...
- Delphi 与SQL编程
Delphi 与SQL编程 SQL语言作为关系数据库管理系统中的一种通用的结构查询语言, 已经被众多的数据库管理系统所采用,如Oracle.Sybase.Informix等数据库管理系统,它们都支持S ...
- Kafka命令行操作
Kafka命令行操作 1)查看当前服务器中的所有topic [bingo@hadoop101 kafka]$ bin/kafka-topics.sh --list --zookeeper hadoop ...
- NX二次开发-UFUN移动工程图视图到另一个图纸页UF_DRAW_move_view_to_drawing
#include <uf.h> #include <uf_draw.h> #include <uf_obj.h> UF_initialize(); //找名字获取视 ...
- ShellExecute打开文件打开文件夹的用法
1 #include <uf.h> 2 #include <uf_part.h> 3 #include <atlstr.h> 4 #include <iost ...