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 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP中Array相关函数简介
2016/07/03 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
详细解密jsonp跨域请求
2015/04/15 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python做接口测试的必要性
2019/11/20 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
服务员自我评价
2014/01/25 职场文书
青春无悔演讲稿
2014/05/08 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
python小型的音频操作库mp3Play
2022/04/24 Python