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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue封装swiper代码实例解析
Oct 08 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
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
简单实现python收发邮件功能
2018/01/05 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python3中列表list合并的四种方法
2019/04/19 Python
django框架forms组件用法实例详解
2019/12/10 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
某公司.Net方向面试题
2014/04/24 面试题
小学生常见病防治方案
2014/06/06 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
费城故事观后感
2015/06/10 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
MySql数据库触发器使用教程
2022/06/01 MySQL