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. python mysql 封装

    封装 观察前面的文件发现,除了sql语句及参数不同,其它语句都是一样的 创建MysqlHelper.py文件,定义类 #encoding=utf8 import MySQLdb class Mysql ...

  2. 九度 1482：玛雅人的密码(BFS)

    题目描述: 玛雅人有一种密码,如果字符串中出现连续的2012四个数字就能解开密码.给一个长度为N的字符串,(2=<N<=13)该字符串中只含有0,1,2三种数字,问这个字符串要移位几次才能 ...

  3. ios开发之--所有设备的屏幕尺寸

    所有设备型号官网地址:https://www.theiphonewiki.com/wiki/Models iPhone: 机型 像素 比例 像素密度 屏幕尺寸 机型代码 发布日期 iPhone 2g ...

  4. Weblogic集群部署

    有些事情不去尝试,注定是失败,如果预知90%的失败仍然去尝试了,那也会从中学到很多,何况仅靠那10%的可能性也会成功 weblogic安装后 1.打开Configuration Wizard 2.创建 ...

  5. ISO27001信息安全管理体系

    0x00 前言 初入甲方,刚开始接触的应该就是ISO27001信息安全管理体系,你拿到的应该就是一整套安全管理类的文档.在甲方,稍微有点规模的公司很注重制度和流程,岗位职责分工明细,那么这些安全管理制 ...

  6. ubuntu 上安装vnc server

    Ubuntu下设置VNCServer   Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作 ...

  7. 自己搭建CDN服务器静态内容加速-LuManager CDN使用教程

    为什么要自己来搭建一个CDN服务器实现网站访问加速?一是免费CDN服务稳定性和加速效果都不怎么行:二是用国内的付费CDN服务价格贵得要死,一般的草根站长无法承受:三是最现实的问题国内的CDN要求域名B ...

  8. Python Subprocess Popen 管道阻塞问题分析解决

    http://ju.outofmemory.cn/entry/279026 场景:1>不断播放mp3文件: 2>使用订阅发布模式保持tcp长连接,从服务器接收信息 造成程序hang死,但是 ...

  9. linux禁止IPv6

    1. 禁止加载IPv6模块 # echo "install ipv6 /bin/true" > /etc/modprobe.d/disable-ipv6.conf 每当系统需 ...

  10. C数组&结构体&联合体快速初始化

    背景 C89标准规定初始化语句的元素以固定顺序出现,该顺序即待初始化数组或结构体元素的定义顺序. C99标准新增指定初始化(Designated Initializer),即可按照任意顺序对数组某些元 ...