vue父子组件传值,vue子父组件传值和兄弟传值
本文主要介绍vue亲子组件的相互值传递和调用，帮助你更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
1、父组件传递值给子组件2、子组件传递值给父组件3、父组件中的子调用方法4、子组件中的父调用方法。
1、父传值给子组件
父组件：
模板
差异
Class= father 父组件/p
child :sid=id/child
/div
/模板
脚本
从导入子级。/孩子
导出默认值{
组件：{
儿童
},
data() {
返回{
Id:1234 //从父组件传递到子组件的值
}
}
}
/脚本
子组件：
模板
差异
Class= child 子组件/p
Class= child 接收父组件的值是：{{ sid }}/p
/div
/模板
脚本
导出默认值{
道具：{
希德：{
类型：字符串，
默认值：“0”
}
},
//props:[sid]，
data() {
返回{
}
}
}
/脚本
描述：
sid是要在子组件中传递的值。记住“=”前的sid应该与子组件中接受的变量名一致。
props在子组件中用来接受传入的值，可以写成对象类型、指定类型、默认值，也可以直接写成字符串。
可以直接在子组件中使用，也可以通过在函数中使用this.sid来访问。
2、子传值给父组件
父组件：
模板
差异
Class= father 父组件/p
Pclass=father 收到子组件的值：{{childSid}}/p
child @ pass value= parent pass value /child
/div
/模板
脚本
从导入子级。/孩子
导出默认值{
组件：{
儿童
},
data() {
返回{
SID: //接收子组件的值
}
},
方法：{
parentPassValue(data) {
this.childSid=data
}
}
}
/脚本
子组件：
模板
差异
Class= child 子组件/p
按钮@click=valueClick 传递值/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
valueClick() {
这个。$ emit( pass value ，19)
}
}
}
/脚本
描述：
给出在子组件中触发$emit的方法。第一个参数是父组件中绑定的子组件的函数名(“passVaule”)，第二个参数是要传递的值(19)
父组件中绑定了一个函数，调用父组件中绑定的函数来接收值。
3、子调用父组件中的方法
父组件：
模板
差异
Class= father 父组件/p
child @ fun value= parent fun value /child
/div
/模板
脚本
从导入子级。/孩子
导出默认值{
组件：{
儿童
},
data() {
返回{
}
},
方法：{
parentFunValue() {
Console.log(“调用了父组件中的函数”)；
}
}
}
/脚本
子组件：
模板
差异
Class= child 子组件/p
Button @click=funClick 调用父组件方法/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
funClick() {
这个。$emit(funVaule )
}
}
}
/脚本
描述：
(1)这类似于子传递值给父的函数，只是不传递值，调用父组件的绑定函数。
4、父调用子组件中的方法
父组件：
模板
差异
Class= father 父组件/p
Button @click=childClick 调用子组件方法/按钮
child ref=mychild/child
/div
/模板
脚本
从导入子级。/孩子
导出默认值{
组件：{
儿童
},
data() {
返回{
}
},
方法：{
childClick() {
这个。$refs.mychild.testNum(1)
}
}
}
/脚本
子组件：
模板
差异
Class= child 子组件/p
/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
testNum(数据){
Console.log(调用了子组件中的方法：，data)；
}
}
}
/脚本
描述：
在父组件中，在引入的子组件中写入ref=mychild mychid定义的实例名。
在函数中写this.refs.mychild.testNum()，其中“testNum”是子组件中定义的函数名。
子组件定义了父组件可以调用的函数。
这个方法也可以用来传递值。传递括号中的值，子组件可以接收它们。
以上是vue亲子组件的相互值传递和调用的细节。更多关于vue亲子组件的值传递和调用，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。