vuejs2.0子组件改变父组件的数据实例


Posted in Javascript onMay 10, 2017

在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这个方法进行了中转,实现了想要的效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue项目初始化到登录login页面的示例
Oct 31 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 #Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 #Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php删除指定目录的方法
2015/04/03 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Python新手入门最容易犯的错误总结
2017/04/24 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
wxPython实现列表增删改查功能
2019/11/19 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Django多个app urls配置代码实例
2020/11/26 Python
python lambda的使用详解
2021/02/26 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
毕业生自荐书
2014/02/03 职场文书
婚前协议书
2014/04/15 职场文书
运动会加油口号
2014/06/07 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
python程序的组织结构详解
2021/12/06 Python