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. delphi 面向对象实用技能教学二(封装)

    面向对象编程手法,是一项综合技能,单独把谁拿出来说都不合适.本次重写 TSimpleThread ,使其能在 D7 下运行. 基于 TSimpleThread ,重磅推出 TSimpleUI.ExeP ...

  2. 问题：C#打开一个文本文档往里面写数据，没有就新建文档 ；结果：c#FileStream文件读写(转)

    FileStream对象表示在磁盘或网络路径上指向文件的流.这个类提供了在文件中读写字节的方法,但经常使用StreamReader或 StreamWriter执行这些功能.这是因为FileStream ...

  3. LNMP 1.6 常见的502问题解决

    在nginx上跑discuz,先修改配置文件 cd /usr/local/nginx/conf/vhosts/ vim test.conf server { listen ; server_name ...

  4. 配置php的curl模块问题

    问题 checking for cURL in default path... not foundconfigure: error: Please reinstall the libcurl dist ...

  5. 用JS 循环做一个表格

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

  6. MVC5网站部署到IIS7

    server 2008R2+IIS7.5下配置不会出现什么问题,这里记录下在server2008+IIS7下的配置 参考了一下:http://www.cnblogs.com/fcu3dx/p/3773 ...

  7. Ajax02 什么是json、json语法、json的使用、利用jQuery实现ajax

    目录 1什么是json 2json语法 3json的使用 4利用jQuery实现ajax编程 1 什么是json JavaScript Object Notation(JavaScript 对象表示法 ...

  8. MySQL update select组合

    update t_news inner join (select readCount from t_news t2 where t2.id=1) t1 set t_news.readCount = t ...

  9. Python 求和函数

    #coding=utf-8 ########################### #求1到10,20到30,30到40之和 ########################### sum=0 for ...

  10. 在Mac OS里安装和升级Git

    在此记录,给自己看,也给别人参考. 进入终端,查看当前Git版本,输入指令:git --version 输入which git回车,可以查看当前git在什么位置 经查,版本:2.10.0,版本较低,为 ...