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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
详解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实现图片添加描边字和马赛克的方法
2014/12/10 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
基于python绘制科赫雪花
2018/06/22 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python for循环与getitem的关系详解
2020/01/02 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
勾股定理课后反思
2014/04/26 职场文书
质量标语大全
2014/06/12 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
道歉信怎么写
2015/05/12 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
Python基础之元编程知识总结
2021/05/23 Python
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL