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这两个工具(如果有不清楚的同学 ...
随机推荐
- Azure机器学习入门（四）模型发布为Web服务
接Azure机器学习(三)创建Azure机器学习实验,下一步便是真正地将Azure机器学习的预测模型发布为Web服务.要启用Web服务发布任务,首先点击底端导航栏的运行即"Run" ...
- JavaScript中国象棋程序（7） - 置换表
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- UE4 RHI与Render模块简解
UE4中的RHI指的是Render hardware interface,作用像Ogre里的RenderSystem,针对Dx11,Dx12,Opengl等等平台抽象出相同的接口,我们能方便能使用相同 ...
- BZOJ 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复（最大生成树）
这很明显就是最大生成树= = CODE： #include<cstdio>#include<iostream>#include<algorithm>#include ...
- python爬虫利器Selenium使用详解
简介: 用pyhon爬取动态页面时普通的urllib2无法实现,例如下面的京东首页,随着滚动条的下拉会加载新的内容,而urllib2就无法抓取这些内容,此时就需要今天的主角selenium. Sele ...
- vsftp之虚拟用户
1.安装: yum install -y vsftpd yum install -y lftp2.创建用户useradd virftp -s /sbin/nologin3.创建虚拟用户及其存放路径vi ...
- HttpClient filter中间转发从A tomcat转发至B tomcat
BackFilter.java 主要解决基于HttpGet/HttpPost以及基于HttpPost的附件流转发import java.io.IOException; import java.io.I ...
- poj 2229 DP
Sumsets Time Limit: 2000MS Memory Limit: 200000K Total Submissions: 15326 Accepted: 6088 Descrip ...
- .NET 三层架构
三层架构简介: 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:界面层(User Interface layer).业务逻辑层(Business Lo ...
- 1112: [POI2008]砖块Klo
1112: [POI2008]砖块Klo Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1245 Solved: 426[Submit][Statu ...