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

vuejs2.0子组件改变父组件的数据的更多相关文章

  1. vue子组件改变父组件的值

    1 在父组件的coment绑定事件 <template> <div :class="classObj" class="app-wrapper" ...

  2. react当中子组件改变父组件的状态

    子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可

  3. react 子组件改变父组件状态

    class Father extends Component {     construtor(props){         super(props);         this.state={   ...

  4. React子组件怎么改变父组件的state

    React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...

  5. vue2.0子组件修改父组件props数据的值

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...

  6. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  7. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

  8. vue2.0 子组件和父组件之间的传值（转载）

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  9. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

随机推荐

  1. border-radius属性值参数详解

    border-radius是CSS3设置圆角的一个属性,其属性值得单位可以使用:em.px.百分比等等.但是,border-radius属性值得参数形式有好多种,那么具体都代表什么意思呢?下面以实际例 ...

  2. 反汇编看c++引用

    继续反汇编系列,本次使用vc2008在x86体系下分析c++中的引用. 定义一个引用类型和将一个变量转换成引用类型一样吗? 引用比指针安全,真的是这样吗,对引用不理解的话比指针还危险. 为什么要用常量 ...

  3. 如何通过注解Bean类来封装SQL插入语句

    整体思路是酱紫的: 给bean上注解说明该bean对应着数据库中哪张表,给每个bean的属性都注解说明各自对应着这张表的哪个字段. 通过类反射获取表名,通过逐个反射每个属性的getter方法,获取注解 ...

  4. BZOJ 3479: [Usaco2014 Mar]Watering the Fields（最小生成树）

    这个= =最近刷的都是水题啊QAQ 排除掉不可能的边然后就最小生成树就行了= = CODE： #include<cstdio>#include<iostream>#includ ...

  5. Windows Opengl ES 环境搭建

    环境 OS:win7 专业版SP1 64位 编译器: VS 2013 express 的cl 软件 windows上运行OpenGL ES要用到第三方的头文件,库文件和dll.下载地址 http:// ...

  6. 理解javascript中参数的按值传递

    有人认为 JS 中参数传递:基本数据类型按值传递:引用类型按引用传递.呵呵 javascript中所有参数是按值传递的 但是当传入的参数是引用类型时,便带来了疑惑 引用类型值保存在内存中,而JS是不能 ...

  7. C语言中NULL的定义

    用C语言编程不能不说指针,说道指针又不能不提NULL,那么NULL究竟是个什么东西呢? C语言中又定义,定义如下: #undef NULL #if defined(__cplusplus) #defi ...

  8. Laptop Ubuntu16.04/14.04 安装Nvidia显卡驱动

    笔记本型号 机械革命(MECHREVO)深海泰坦X6Ti-S(黑曜金)15.6英寸 CPU型号 i5-7300HQ 内存 8G 硬盘容量 128SSD+1T机械硬盘 显卡 GeForce GTX 10 ...

  9. 1054: [HAOI2008]移动玩具

    1054: [HAOI2008]移动玩具 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1272  Solved: 690[Submit][Statu ...

  10. 【HAL库每天一例】freemodbus移植

    例程下载:资料包括程序.相关说明资料以及软件使用截图 百度云盘:https://pan.baidu.com/s/1slN8rIt 密码:u6m1 360云盘:https://yunpan.cn/OcP ...