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类中定义原型方法的两种实现的区别
Mar 08 Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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的中问验证码
2006/11/25 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
js异或加解密效果代码
2008/06/25 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python中bisect的用法及示例详解
2020/07/20 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
普天C++笔试题
2016/03/20 面试题
一些Solaris面试题
2015/12/22 面试题
教师自荐书
2013/10/08 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
办公室主任职责范本
2014/03/07 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers