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 父组件 ...
随机推荐
- Scala学习七——包和引入
一.本章要点 包也可也可以像内部类那样嵌套 包路径不是绝对路径 包声明链x.y.z并不自动将中间包x和x.y变成可见 位于文件顶部不带花括号的包声明在整个文件范围内有效 包对象可以持有函数和变量 引入 ...
- IIS--解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项。试图加载
解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项.试图加载 ASP.NET MVC 项目发布的在本地IIS后,启动网站出现未能加载文件或程序集“…”或它的某一个依赖项. ...
- nop4.1学习ServiceCollectionExtensions（二）（ioc，ef，ef连接的实现）
这个是获取程序路径,并初始化文件管理类 初始化插件管理 接下来就是注册服务和autoafc 在INopStartup配置sql连接,插件,mvc等 配置了sql连接 数据库的配置类 在AddAutoM ...
- C#进阶之泛型（Generic）
1.泛型 泛型是framwork2.0推出的新语法,具有延迟声明的特点:把参数类型的声明推迟到调用的时候.泛型不是一个语法糖,是框架升级提供的功能.需要编辑器和JIT(just-in-time com ...
- 【zhifu】web开发中的支付宝支付和微信支付
一.支付类型: 支付宝支付: 支付宝app内的网页支付: app外(即普通浏览器)网页支付: 微信支付: 微信app内的支付(在这里叫公众号支付) app外的支付(微信H5支付): 微信公众号的支付宝 ...
- 查找和杀掉占用GPU显存的进程
用只有2个G的显卡跑数据就需要在训练之前先把无关进程杀掉,防止跑到一半显存满了 nvidia-smi:显示当前GPU中的线程 kill -9 PID:输入PID以结束线程
- 创建json对象
jQuery创建json对象 方法二: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- Java必考题目之JVM面试题目和答案
JVM内存模型 首先我们来了解一下JVM的内存模型的怎么样的: 1.堆:存放对象实例,几乎所有的对象实例都在这里分配内存 堆得内存由-Xms指定,默认是物理内存的1/64:最大的内存由-Xmx指定,默 ...
- docker 安装ps命令
apt-get update && apt-get install procps
- SQL 多表查询展示
########################多表########################SELECT COUNT(*) FROM MEMBER1 A; 查询出来的结果为43行数据: SEL ...