vuejs2.0子组件改变父组件的数据
在vue2.0之后的版本中，不允许子组件直接改变父组件的数据，在1.0的版本中可以这样操作的，但是往往项目需求需要改变父组件的数据，2.0也是可一个，区别是，当我们把父元素的数据给子组件时，需要传一个对象，子组件通过访问对象中的属性操作数据，下面是演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
myData:{
info:'父组件信息'
}
},
components:{
'v-com':{
props:['data'],
template:'#tpl',
methods:{
change(){
this.data.info = 'change info'
}
}
}
}
})
}
</script>
</head>
<body>
<!-- 子组件改变父组件的数据 -->
<div id="box">
<div>
<p>{{myData.info}}</p>
<v-com :data ="myData"></v-com>
</div>
</div> <!-- 模板 -->
<template id="tpl">
<div>
<button @click="change">change</button>
<p>{{data.info}}</p>
</div>
</template> </body>
</html>
这种是同步改变数据，就是说子组件的数据改变，父组件数据也跟着改变，下面展示非同步的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
myData:'父组件信息'
},
components:{
'v-com':{
data() {
return {
childData:''
}
},
props:['data'],
// dom渲染完毕
mounted(){
this.childData = this.data
},
template:'#tpl',
methods:{
change(){
this.childData = 'change info'
}
}
}
}
})
}
</script>
</head>
<body>
<!-- 子组件改变父组件的数据,不同步 -->
<div id="box">
<div>
<p>{{myData}}</p>
<v-com :data ="myData"></v-com>
</div>
</div> <!-- 模板 -->
<template id="tpl">
<div>
<button @click="change">change</button>
<p>{{childData}}</p>
</div>
</template> </body>
</html>
这里巧妙的通过mounted这个方法进行了中转，实现了想要的效果
vuejs2.0子组件改变父组件的数据的更多相关文章
- vue子组件改变父组件的值
1 在父组件的coment绑定事件 <template> <div :class="classObj" class="app-wrapper" ...
- react当中子组件改变父组件的状态
子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可
- react 子组件改变父组件状态
class Father extends Component { construtor(props){ super(props); this.state={ ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...
- vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
- vue2.0 子组件和父组件之间的传值（转载）
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
随机推荐
- 2017-2-19 C#基础 基本数据类型的转换，转义字符，常量
1.基本数据类型的转换分两种:自动转换(隐式转换)和强制转换(显式转换).自动转换是从只类型转换到引用类型.强制转换是最长用的,是从引用类型转换到值类型或者从浮点型转换到整形.强制转换主要有三种形式: ...
- Javascript定时器中的this指向
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = ...
- 【转】Nutch的Hadoop方式爬取效率优化
原文地址:http://my.oschina.net/junfrank/blog/290404
- JAVA 在程序中存储和修改信息
1.语句和表达式 计算机程序是一组告诉计算机什么的指令,每一个指令称为语句. 2.指定变量类型 变量名.变量存储的信息类型 整型int(-2.14*109~2.14*109).浮点型float(38位 ...
- angular2入门，就这一篇就够了
背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...
- 服务器 'XXXXXX' 上的 MSDTC 不可用。解决方法
今天在C#中操作数据库的时候突然发现这个问题:服务器 'USER-XXX' 上的 MSDTC 不可用. 解决方法: 在windows控制面板 --> 管理工具 --> 服务 --> ...
- 3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 129 Solv ...
- 1059: [ZJOI2007]矩阵游戏
1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2154 Solved: 1053[Submit][Stat ...
- JSP +++SERVIET总复习
一. JSP基础概念 软件架构 B/S架构:Browser/Server,浏览器-服务器 最大的优点就是:一次部署,处处访问. C/S架构:Client/Server,客户端-服务器 功能.事件丰富, ...
- 备胎的养成记KeepAlived实现热备负载
在 入坑系列之HAProxy负载均衡 中已经详细讲过了怎么将高并发的请求按均衡算法分发到几台服务器上做均衡防止单机崩溃. 但这样的话有没有发现所有请求都经过了HAproxy代理,自然当并发量越来越高 ...