Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。

Vue常用的三种传值方式有：

父传子

子传父

非父子传值

组件之间的通讯:

　　vm.$emit()

　　vm.$on()写在组件里面的

子组件在页面上展示,由于这里采用的是h-build写的,所以格式上并没有注意:

<!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">

            <child-com></child-com>

        </div>

        <template id="child">

            <div>

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

            </div>

        </template>

    </body>

    <script>

        //生命周期函数,就是vue实力在某个时间点会自动执行的函数

        var app =new Vue({

            el:"#app1",

            data:{

            },

            components:{

                'child-com':{

                    template:'#child'

                }

            }

        })

    </script>

</html>

可以看到组件在页面上展示了,,子组件想拿到父组件的一些数据<需要通过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进行传值-->

            <child-com :msg="a">

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

            </child-com>

        </div>

        <template id="child">

            <div>

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

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

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

            </div>

        </template>

    </body>

    <script>

        var app =new Vue({

            el:"#app1",

            data:{

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

            },

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

            components:{

                'child-com':{

                    props:['msg'],

                    template:'#child'

                }

            }

        })

    </script>

</html>

展示效果:

子组件就可以i轻易的拿到父组件的数据.

关键点:

vue.js组件之j间的通讯一 子组件接受父祖件数据的更多相关文章

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

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

  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 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  5. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  6. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  7. Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  8. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  9. EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel

    示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext. ...

随机推荐

  1. 2015.1.10 解决DataGridView SelectionChanged事件自动触发问题

    DataGridView SelectionChanged事件总是在数据源更改时自动触发,这点很讨厌. 可用CellClick和KeyUp事件和一个函数替代SelectionChanged事件 pri ...

  2. 第七章 Java中的13个原子操作类

    当程序更新一个变量时,如果多线程同时更新这个变量,可能得到期望之外的值,比如变量i = 1:A线程更新i + 1,B线程也更新i + 1,经过两个线程操作之后可能i不等于3,而是等于2,.因为A和B线 ...

  3. NodeJs之文件合并（某一文件的内容发生变化与之相关的内容重新合并）

    首先,一个文件里面的内容是由多个文件共同组成的.例如一个文件夹包含有多文件(文件夹) 然后,当其中一个发生变化时所用与之有直接作用的文件(文件夹)都会重新组合. /*注意:该例子需要在同级目录下完成及 ...

  4. 问题：Oracle出发器；结果:1、Oracle触发器详解，2、Oracle触发器示例

    ORACLE触发器详解 本篇主要内容如下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创 ...

  5. DAY15-web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  6. hadoop job -kill 与 yarn application -kii（作业卡了或作业重复提交或MapReduce任务运行到running job卡住）

    问题详情  解决办法 [hadoop@master ~]$ hadoop job -kill job_1493782088693_0001 DEPRECATED: Use of this script ...

  7. TCP/IP 笔记 1.2 链 路 层

    都是包含三种类型.根据类型字段的值来进行区分 2.4 SLIP:串行线路IPS L I P的全称是Serial Line IP.它是一种在串行线路上对 I P数据报进行封装的简单形式,在RFC 105 ...

  8. struct-config.xml配置文件的解析

    //定义了xml文件的版本和编码<?xml version="1.0" encoding="UTF-8"?>//配置文件中的元素必须按照下述doc指 ...

  9. Python 黑客 --- 002 入门级 ZIP压缩文件口令暴力破解机

    Python 黑客 入门级实战:ZIP压缩文件口令暴力破解机 使用的系统:Ubuntu 14.04 LTS Python语言版本:Python 2.7.10 V 编写zip 压缩文件口令破解器需要使用 ...

  10. 算法Sedgewick第四版-第1章基础-004一封装交易对象

    1. package ADT; /****************************************************************************** * Co ...