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.3.7 Dll CString不能作为传入参数而要用char*

    extern "C" __declspec(dllexport) void CalcArc_2(Point2D& pm, double am, double an, CSt ...

  2. Java堆初始大小的建议值

    摘自:<Java Performance>第三章 Initial Heap Space Size Configuration This section describes how to u ...

  3. Eclipse中Next Difference的快捷键

    原文:http://stackoverflow.com/questions/10177460/is-there-a-key-binding-for-next-difference-and-previo ...

  4. jsp与struts的区别

    JSP通常用于MVC的View层,Struts1,Struts2用于MVC的Control层. JSP用来展示页面信息,使用servlet API封装而成,代替servlet中response向客户端 ...

  5. 运动事件Motion Events

    备注:运动事件,也是加速度时间,一般像摇晃手机就属于运动事件           监听运动事件对于UI控件有个前提就是监听对象必须是第一响应者(对于UIViewController视图控制器和UIAP ...

  6. [Python Study Notes]pandas.DataFrame.plot()函数绘图

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  7. 【262】pscp命令 实现windows与linux互传文件

    首先将pscp.exe文件放在某个文件夹中 新建*.bat文件 w-wx.bat代码 @echo off pscp.exe -pw l*****h D:\Windows-Linux\Data\* oc ...

  8. CentOS 6.3安装jdk（笔记整理）

    1. 下载bin文件,切忌oracle上现在下载到的旧版本的jdk的bin都是网页(执行会报错,见本文最后的截图),他们需要登录oracle后才能下载,所以我这里的url是从googlecode里觅来 ...

  9. iframe自适应高度（转）

    iframe自适应高度 (2013-04-23 17:29:49) 标签: iframe 高度 自适应 js 杂谈 分类: 网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用 ...

  10. SpringBoot12 QueryDSL02之利用QueryDSL实现多表关联查询

    1 业务需求 有的系统业务逻辑比较复杂,存在着多表关联查询的的情况,查询的内容不仅仅是单张表的的内容而是多张表的字段组合而成的,直接使用SplringDataJPA实现是比较复杂的,但是如果使用Que ...