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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- 用Cython加速Python代码
安装Cython pip install Cython 如何使用 要在我们的笔记本中使用Cython,我们将使用IPython magic命令.Magic命令以百分号开始,并提供一些额外的功能,这些功 ...
- Android网络(3):HttpClient作client,Tomcat Servlet作server的交互演示样例
前面相继介绍了Android网络编程里的Socket传输图片.HttpURLConnection,今天看HttpClient. 第一部分:JavaEE版的Eclipse配置Tomcat [备注:开发后 ...
- win查看所有wifi密码
for /f "skip=9 tokens=1,2 delims=:" %i in ('netsh wlan show profiles') do @echo %j | finds ...
- HTML 自定义元素教程
组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望. 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements). 文章 ...
- 运行Hama实例PageRank
- TRUNCATE - 清空一个表
SYNOPSIS TRUNCATE [ TABLE ] name DESCRIPTION 描述 TRUNCATE 快速地从一个表中删除所有行.它和无条件的 DELETE 有同样的效果,不过因为它不做表 ...
- Oracle使用——PLSQL的中文乱码显示全是问号--Oracle查询中文乱码
问题 这两天刚将PLSQL与Oracle配置好,可是在PLSQL中插入数据时,出现一个问题,PLSQL中的表里无法显示中文,中文无法保存.无法输出,中文在表中显示问号,如图: 原因 经过一番查证, ...
- 使用JS实现快速排序
大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 function quickSort(arr){ //如果数组<=1, ...
- HashSet 详解
基本介绍 1. 不允许重复(底层是HashMap,用key储存元素,value统一都是 PRESENT),可以为null,无顺序 2. HashSet就是为了提高查找效率的(在查找是否存在某个值时,A ...
- NX二次开发-UFUN打开选择文件夹对话框UF_UI_create_filebox
#include <uf.h> #include <uf_ui.h> #include <string> using namespace std; string O ...