Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门
父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；
使用步骤：
1、定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件
2、准备获取数据：com-b要获取父组件data中的name属性
3、在<com-b :name=“name”></com-b> 使用v-bind 绑定name属性，红色部分为属性名称，可以随意写
4、在子组件定义部分里添加选项，值是个字符串数组 props:[‘name’]，将上边红色的属性名称写在这里
5、之后就可定义在子组件中使用name属性了
Learn：
一、父组件向子组件传值
二、Props选项高级选项配置
目录结构
一、父组件向子组件传值
需要在父组件中用v-bind绑定name属性
<template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span><br />
<input type="text" v-model="name"/>
<hr /> <child-component :name="name"></child-component>
</div>
</template>
在Vue中components属性中通过props选项给子组件绑定name标签
new Vue({
data : {
},
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props:['name']
}
}
}
}
}).$mount("#GaryId");
在子组件中就可以直接通过{{props}}将值传递过去
<template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span><br />
<input type="text" v-model="name"/>
<hr /> <child-component :name="name"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : { },
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props:['name']
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_fatherAndChild.html
在father组件的<child-component>组件中使用多个v-bind属性可实现多组数值传递
<template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}},{{id}},{{user.username}}</span><br />
fatherDate : <span>msg</span><br />
<input type="text" v-model="name"/>
<hr /> <child-component :name="name" :id="id" :user="user"></child-component>
</div>
</template>
Vue中给子组件添加user对象，以及给对象初始值msg:'helloVue'并在父组件中通过<father-component :msg="msg"></father-component>中直接使用
new Vue({
data : {
msg:'helloVue'
},
components : {
"father-component" : {
data(){
return {
id:1,
name : 'Gary',
user:{
username:'Gary520',
password:'5201314'
}
}
},
props:['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props:['name','id','user']
}
}
}
}
}).$mount("#GaryId");
同理在父组件中调用数据
<template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}},{{id}},{{user.username}}</span>
</div>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component :msg="msg"></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}},{{id}},{{user.username}}</span><br />
fatherDate : <span>msg</span><br />
<input type="text" v-model="name"/>
<hr /> <child-component :name="name" :id="id" :user="user"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}},{{id}},{{user.username}}</span>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : {
msg:'helloVue'
},
components : {
"father-component" : {
data(){
return {
id:1,
name : 'Gary',
user:{
username:'Gary520',
password:'5201314' }
}
},
props:['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props:['name','id','user']
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_fatherAndChild.html
二、Props选项高级选项配置 传送门
使用Props还可以实现许多功能，如设置默认值、数据校验、设置返回值
new Vue({
data : {
},
components : {
"father-component" : {
data(){
return {
id : '01',
name : 'Gary',
user : {
username : 'Gary520',
password : '5201314'
},
age : 20
}
},
props : ['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
//props : ['username', 'id', 'user']
props : {
name : {
type : String,
//必须得传值可使用required : true,
default : "Garydef"
},
id : [Number, String],
user : {
type : Object,
default : function(){
return {username : 'userGary', password : 'pw123'};
}
},
age : {
type : Number,
validator : function(value){
return value >= 0;
}
}
}
}
}
}
}
}).$mount("#GaryId");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData :
<span>
{{name}} ,
{{id}} ,
{{user.username}} ,
{{age}}
</span><br /><hr />
<child-component :id="id" :age="age"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData :
<span>
{{name}} ,
{{id}} ,
{{user.username}},
{{age}}
</span>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : { },
components : {
"father-component" : {
data(){
return {
id : '01',
name : 'Gary',
user : {
username : 'Gary520',
password : '5201314'
},
age : 20
}
},
props : ['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
//props : ['username', 'id', 'user']
props : {
name : {
type : String,
//必须得传值可使用required : true,
default : "Garydef"
},
id : [Number, String],
user : {
type : Object,
default : function(){
return {username : 'userGary', password : 'pw123'};
}
},
age : {
type : Number,
validator : function(value){
return value >= 0;
}
}
}
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_props.html
Vue_(组件通讯)父组件向子组件传值的更多相关文章
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- Vue把父组件的方法传递给子组件调用(评论列表例子)
Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 【VUE】7.组件通信（二）子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- vue3常见问题及解决方案（四）父组件切换行，然后子组件切换tab，子组件内的数据不刷新
问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...
- 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法
父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
随机推荐
- 10-Perl 循环
1.Perl 循环一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推.有的时候,可能需要多次执行同一块代码.编程语言提供了更为复杂执行路径的多种控制结构.循环语句允许 ...
- [转载]flex中的正则表达式
原文:https://blog.csdn.net/hczhiyue/article/details/20483209 (1)单字符匹配* ‘x’ 匹配字符 x.* ‘.’ 匹配任意一个字符(字节),除 ...
- centos 配置rsync+inotify数据实时同步2
一.Rsync服务简介 1. 什么是Rsync 它是一个远程数据同步工具,它在同步文件的同时,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“rsync算法”来使本地和远程两个主机 ...
- python之jupyter notebook
jupyter是一种交互式计算和开发环境的笔记,ipython命令行比原生的python命令行更加友好和高效,还可以运行web版的界面,支持多语言,输出图形.音频.视频等功能. 安装 pip inst ...
- .NET中跨线程访问winform控件的方法
1 第一种方式 MethodInvoker invoker = () => { richTextBox1.AppendText(_ClientSocketModelConnectedEvent. ...
- 如何源码编译安装并控制nginx
安装nginx 注意 Linux操作系统需要2.6及其以上的内核(支持epoll) 使用nginx的必备软件 gcc编辑器 yum -y install gcc gcc-c++ pcre库(支持正则表 ...
- 06-【servletconfig、servletContext 】
ServletConfig.ServletContext 1.ServletConfig获取web.xml中的配置信息:java代码: @Override public void init(Servl ...
- Java_Eclipse_Android安装
转自——链接:https://www.cnblogs.com/summary-2017/p/8073225.html
- uCos-II移值(二)
os_cpu_c.c文件 该文件主要是根据处理器平台特点完成任务堆栈初始化函数OSTaskStkInit以及其他几个用户Hook函数的编写,其中必须要实现的函数是OSTaskStkInit(在创建任务 ...
- MHA原理
MHA工作原理 主库挂了,但是主库的binlog都被全部从库接收,此时会选中应用binlog最全的一台从库作为新的主库,其他从主只需要重新指定一下主库即可(因为此时,所有从库都是一致的,所以只需要重新 ...