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 父组件 ...
随机推荐
- charles 抓包 （一）
在web.app开发中经常需要通过抓包来定位页面.接口返回数据的问题.在mac系统中,charles是一款功能丰富的抓包软件.可以实现app的数据抓包. 工具:charles 附送charles的破解 ...
- Scala学习六——对象
一.本章要点 用对象作为但例或存放工具的方法 类可以拥有一个同名的伴生对象 对象可以扩展类或特质 对象的apply方法通常用来构造伴生类的新实例 如果不想显示定义main方法,可以扩展App特质的对象 ...
- axios配置
import axios, { isCancel } from 'axios' import { md5 } from 'vux' import util from '@/libs/util' imp ...
- java实现spark常用算子之ReduceByKey
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...
- 06 Go语言基本命令
在命令行执行go命令查看相关的Go语言命令: 以windows为例,在DOS窗口输入go Go is a tool for managing Go source code. Usage: go com ...
- pxc 5.6 忘记 root 密码
pxc 5.6 忘记密码处理 只说思路: mysql.user 是 myisam 引擎的,pxc 只支持 innodb 引擎.其他存储引擎的更改不复制.然而,DDL(Data Definition L ...
- Linux根文件系统和目录结构及bash特性3
bash的基础特性: 命令补全: shell程序在接收到用户执行命令的请求,分析完成之后,最左侧的字符串会被当作命令 命令查找机制: 查找内部命令 ...
- 网络协议相关面试问题-https加密算法相关面试问题
密钥: 密钥是一种参数,它是在使用密码cipher算法过程中输入的参数,同一个明文在相同的密码算法和不同的密钥计算下会产生不同的密文.所以说算法既使公开了但是密钥参数不同其结果也是不同的,其中关于明文 ...
- BZOJ 1001 平面图转对偶图
原图的面转成点,原图的边依旧边,只是连接的是两个面. 对偶图的点数=原图的面数 对偶图的边数=原图的边数(如果原边只属于一个面,则它为环边) #include<bits/stdc++.h> ...
- for(auto count:counts)
c++中for(auto count : counts) 这是C++11中的语法,即:Range-based for loop.其中counts应满足:begin(counts), end(count ...