<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

    </head>

    <body>

        <div id="app1">

            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->

            父级:{{a}}

            <br />

            <child-com :msg="a">

            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>

        </div>

        <template id="child">

            <div>

                <h2>我是子组件</h2>

                <!--//在子组件中进行展示-->

                <input type="button" value="按钮"  @click="change"/>

                <strong>{{msg}}</strong>

            </div>

        </template>

    </body>

    <script>

        var app =new Vue({

            el:"#app1",

            data:{

                a:'我是父组件的数据'

            },

            /*//子组件,利用props进行数据传递:*/

            components:{

                'child-com':{

                    props:['msg'],

                    template:'#child',

                    methods:{

                        change(){

                            this.msg='被更换了'

                        }

                    }

                }

            }

        })

    </script>

</html>

在更改子组件数据的时候,是可以进行更改的,通过change方法进行更改:

展示结果:

点击change之后:

问题:子组件数据更改,怎么去更改父组件的数据呢:禁止通过props去更改数据

解决方案:

一:每次进行传值采用对象进行传值,对象之间是引用的,所以在更改之后是引用的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

    </head>

    <body>

        <div id="app1">

            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->

            父级:{{giveData.a}}

            <br />

            <child-com :msg="giveData">

            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>

        </div>

        <template id="child">

            <div>

                <h2>我是子组件</h2>

                <!--//在子组件中进行展示-->

                <input type="button" value="按钮"  @click="change"/>

                <strong>{{msg.a}}</strong>

            </div>

        </template>

    </body>

    <script>

        var app =new Vue({

            el:"#app1",

            data:{

                giveData:{

                    a:'我是父组件的数据'

                }

            },

            /*//子组件,利用props进行数据传递:*/

            components:{

                'child-com':{

                    props:['msg'],

                    template:'#child',

                    methods:{

                        change(){

                            this.msg.a='被更换了'

                        }

                    }

                }

            }

        })

    </script>

</html>

展示效果:

更改之后数据:

如果不想报错:可以进行给改自己的数据,然后通过mounted函数,将更改的数据传递给自己.

如果想更改自己数据,不更改父组件的案例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

    </head>

    <body>

        <div id="app1">

            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->

            父级:{{a}}

            <br />

            <child-com :msg="a">

            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>

        </div>

        <template id="child">

            <div>

                <h2>我是子组件</h2>

                <!--//在子组件中进行展示-->

                <input type="button" value="按钮"  @click="change"/>

                <strong>{{b}}</strong>

            </div>

        </template>

    </body>

    <script>

        var app =new Vue({

            el:"#app1",

            data:{

                    a:'我是父组件的数据'

            },

            /*//子组件,利用props进行数据传递:*/

            components:{

                'child-com':{

                    data(){

                        return {

                            b:''

                        }

                    },

                    props:['msg'],

                    template:'#child',

                    mounted(){

                        this.b=this.msg;

                    },

                    methods:{

                        change(){

                            this.b='被更换了'

                        }

                    }

                }

            }

        });

    </script>

</html>

更改子组件数据,就是更改子组件的数据.

展示效果:

change之后:

vue.js组件之j间的通讯二的更多相关文章

  1. vue.js组件之j间的通讯一 子组件接受父祖件数据

    Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

  2. vue.js组件之j间的通讯三,通过单一事件来管理组件通讯

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. vue.js组件之j间的通讯四,通过单一事件来管理组件通讯

    总结; 首先需要创建是一个空实例: var vm = new Vue(); vm.$emit(事件,数据); vm.$on(事件,function(data){ }bind(this))

  4. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  5. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  8. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  9. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

随机推荐

  1. C语言学习笔记--条件编译

    C语言中的条件编译的行为类似于 C 语言中的 if…else…,是预编译指示命令,用于控制是否编译某段代码 . 1.条件编译的本质 (1)预编译器根据条件编译指令有选择的删除代码 (2)编译器不知道代 ...

  2. 【273】利用ArcPy建立处理数据的脚本

    这个脚本可以直接运行处理程序,首先在 ArcPy 上面测试,成功后写入文件,下面的代码实现将指定文件夹内部的栅格数据进行 Calculate Statistics 操作,否则在进行专题图制作的时候会出 ...

  3. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. MySQL存储引擎 -- MyISAM(表锁定) 与 InnoDB(行锁定) 锁定机制

    前言 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就成为了各种数据库的核心技术之一.本章将对MySQL中两种 ...

  5. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

  6. g2o20160424 CMakeLists.txt

    LIB_PREFIX: 设置生成库的前缀 SET(LIB_PREFIX g2o_) # The library prefix SET(LIB_PREFIX g2o_) 变量的默认配置 # defaul ...

  7. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-008Polymorphic many-to-one associations(@ManyToOne、@Inheritance、)

    一.结构 二.代码 1. package org.jpwh.model.inheritance.associations.manytoone; import org.jpwh.model.Consta ...

  8. R: 判别分析

    判别与聚类的比较: 聚类分析和判别分析有相似的作用,都是起到分类的作用. 判别分析是已知分类然后总结出判别规则,是一种有指导的学习: 聚类分析则是有了一批样本,不知道它们的分类,甚至连分成几类也不知道 ...

  9. 前端（HTML/CSS/JS）-JavaScript编码规范

    1. 变量命名 (1)变量名不应以短巧为荣 左边的变量名都不太清楚,代码的扩展性不好,一旦代码需要加功能的话,就容易出现obj1.obj2.obj3这种很抽象的命名方式.所以一开始就要把变量的名字起得 ...

  10. HUST高级软件工程--测试管理工具实践--Day1

    测试管理工具实践--Day1 今天完成任务情况: 课前组好队伍,建好微信群. 课上通过老师的介绍,初步了解各种测试工具的使用情况. 课后选取了组长,在微信群经过"广泛而激烈"的讨论 ...