VUE中父组件向子组件传递数据 props使用
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使用的更多相关文章
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- vue父页面给子页面传递数据
父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...
- 总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...
- 单文件组件.vue---父子组件通信
每一个.vue 文件就是一个 组件,组件和组件相互组合,就成了一个应用,这就涉及到的组件和组件之间的通信,最常用的就是父子之间的通信.在vue 中, 在一个组件中通过 import 引入另一个组件,这 ...
- vue-父组件向子组件传值
一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
随机推荐
- python Thread对象的setDaemon(True)的作用。
1.如果主线程是永远都不会结束的,那设置一个线程为守护线程是没必要的,设不设置都一样. 2.什么时候需要设置为守护线程?如果希望子线程一直运行,可以把子线程的代码写在while True里面一直循环, ...
- pyqt与拉勾网爬虫的结合
人力部需要做互联网金融行业的从业人员薪酬分析,起初说的是写脚本,然后他们自己改.但这样不太好,让人事部来修改py脚本不太好,这需要安装py环境和一些第三方包,万一脚本改来改去弄错了,就运行不起来了. ...
- Java显示指定类型的文件
文件作为存储数据的单元,会根据数据类型产生很多分类,也就是所谓的文件类型.在对数据文件进行操作时,常常需要根据不同的文件类型来作不同的处理.本实例实现的是读取文件夹指定类型的文件并显示到表格控件中.这 ...
- 关联Left Outer Join的第一条记录
数据准备 CREATE TABLE person (person_id ), lastname )) / INSERT ALL INTO person (person_id, firstname, l ...
- flexbox常用布局上下固定，中间滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- PHP代码审计笔记--弱类型存在的安全问题
0x01 前言 PHP 是一门弱类型语言,不必向 PHP 声明该变量的数据类型,PHP 会根据变量的值,自动把变量转换为正确的数据类型. 弱类型比较,是一个比较蛋疼的问题,如左侧为字符串,右侧为一个整 ...
- Nginx 默认虚拟主机
一台服务器可以配置多个网站,每个网站都称为一个虚拟主机,默认的虚拟主机可以通过 default_server 来指定:: [root@localhost ~]$ cat /usr/local/ngin ...
- commons-beanutils的使用
commons-beanutils是通过内省来完成的. 需要两个包: commons-beanutils-1.8.3.jar commons-logging-1.1.1.jar JavaBean类: ...
- 关于GDI+的一些使用基础设置
一.新建一个MFC的单文档工程,例如工程名字叫GDIPLUSTEST1. 二.在工程的stdafx.h头文件中添加入 #include "gdiplus.h" using name ...
- 配置React Native环境及解决运行异常
一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默 ...