VUE中，子组件是不能直接访问父组件的数据（一般来说，当然如果你要破坏原则也是可以）,如下<

<body>
　　<div id="fathercomponent">

      <ul>

          <li v-for="item in fatherdatas">{{item}}</li> <!--父组件可以访问它自己的数据-->

      </ul>

      <child-component></child-component>

    </div>
</body>
<script type="text/javascript">

        Vue.component('child-component', {

           // template:'<ul><li v-for="item in fatherdatas"></li></ul>'//子组件不能访问到父组件的数据

        })

        vm = new Vue({

            data: {

                fatherdatas: [1,2,3,4,5]

            }

        }).$mount('#fathercomponent');

 </script>

上面代码  vm实例挂在了id 为fathercomponent 的DIV中，相当于fathercomponent为一个组件了，这个时候我们在其中定义了一个另一个新组件，这个新定义的组件，和原来的组件，即为父子关系，暂且命名为child-component

我们在vm 中定义的数据 fatherdatas，是父组件fathercomponent中的数据，可以直接在父组件中引用，子组件内部是无法访问到fatherdatas数据的。如果我们需要访问这个fatherdatas需要通过props属性来实现，具体如下

    <div id="fathercomponent">

        <ul>

            <li v-for="item in fatherdatas">{{item}}</li> <!--正确父组件可以访问它自己的数据-->

        </ul>

        <child-component :dataarr="fatherdatas"></child-component> <!--我们将父组件中的fatherdatas数据传给子组件中的dataarr-->

    </div>
  Vue.component('child-component', {

            props: ['dataarr'],//给props添加一个属性，这个属性名字是之前在组件标签中加的

            template: '<ul><li v-for="item in dataarr">{{item}}</li></ul>' //这个时候父组件中的fatherdatas 已经传递给了当前组件的dataarr，这样就可以访问了

        })

        vm = new Vue({

            data: {

                fatherdatas: [1,2,3,4,5]

            }

        }).$mount('#fathercomponent');

父组件传递给子组件，是按值传递，因为此时的值是一个对象地址，所以不管是改子组件中的dataarr，还是改父组件fatherdatas，都会影响到另一方，如下

    <div id="fathercomponent">

        <ul>

            <li v-for="item in fatherdatas">{{item}}</li> <!--正确父组件可以访问它自己的数据-->

        </ul>

        <child-component :dataarr="fatherdatas" @father="getfatherdatas"></child-component> <!--我们将父组件中的fatherdatas数据传给子组件中的dataarr-->

    </div>                                      <!--定义一个father事件-->
        Vue.component('child-component', {

            props: ['dataarr'],//给props添加一个属性，这个属性名字是之前在组件标签中加的

            template: '<ul><li v-for="item in dataarr">{{item}}</li></ul>', //这个时候父组件中的fatherdatas 已经传递给了当前组件的dataarr，这样就可以访问了

            created: function () {

                this.dataarr.push(6);//子组件中的dataarr 添加一个数组元素

                this.$emit('father');//触发组件的father事件

            }

        })

        vm = new Vue({

            methods: {

                getfatherdatas() {

                    console.log(this.fatherdatas.join(','));//输出1,2,3,4,5,6

                }

            },

            data: {

                fatherdatas: [1,2,3,4,5]

            }

        }).$mount('#fathercomponent');

VUE中父组件向子组件传递数据 props使用的更多相关文章

  1. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

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

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

  3. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  4. vue父页面给子页面传递数据

    父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...

  5. 总结Vue第二天：自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  6. 单文件组件.vue---父子组件通信

    每一个.vue 文件就是一个 组件,组件和组件相互组合,就成了一个应用,这就涉及到的组件和组件之间的通信,最常用的就是父子之间的通信.在vue 中, 在一个组件中通过 import 引入另一个组件,这 ...

  7. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  8. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  9. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

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

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

随机推荐

  1. MTK 预置apk

    一.如何将带源码的APK预置进系统? 1)     在 packages/apps 下面以需要预置的 APK的 名字创建一个新文件夹,以预置一个名为Test的APK 为例 2)     将 Test ...

  2. Window系统、主函数和窗体函数这三者之间的关系

    理解Window系统.主窗体.窗体函数这三者之间的关系,对于编写Windows程序十分重要. 主函数和窗体函数都是由Windows系统来调用的函数.仅仅只是主函数是程序启动之后.系统首先调用的函数: ...

  3. html+jquery制作网页地图

    http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...

  4. Handler基本用法

    片断一:mHandler = new Handler();mRunnable = new Runnable() { @Override public void run() { currentPosit ...

  5. Android学习之位图BitMap

    BitMap代表一张位图,扩展名可以是.bmp或者.dib.位图是Windows标准格式图形文件,它将图像定义为由点(像素)组成,每个点可以由多种色彩表示,包括2.4.8.16.24和32位色彩.例如 ...

  6. 《转载》脚本实现从客户端服务端HTTP请求快速分析

    本文转载自https://www.imooc.com/article/14107 首先我想介绍下,分享这个脚本的用处: 当客户告知我们,一个页面http://www.xxx.com 有问题时,作为PE ...

  7. 树莓派上 安装并 运行opencv

    1.先安装依赖项 OpenCV 2.2以后版本需要使用Cmake生成makefile文件,因此需要先安装cmake. sudo apt-get install build-essential sudo ...

  8. WP8.1学习系列(第十二章)——全景控件Panorama开发指南

    2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows ...

  9. Material Design系列第三篇——Using the Material Theme

    Using the Material Theme This lesson teaches you to Customize the Color Palette Customize the Status ...

  10. Delphi应用程序的调试（一）

    集成式调试器是Delphi IDE的一个重要特性.该调试器使用户能方便地设置断点.监视变量.检查对象等等.在运行程序时,使用该调试器能快速查找出程序发生了什么(或未发生什么).一个号的调试器对程序开发 ...