本文主要介绍Vue父子组件的值传递，通过示例代码介绍的非常详细，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
一、简要介绍
在父组件和子组件之间有三种主要类型的传递值：传递值、传递方法和传递对象。传递的值主要由子组件的props属性接收，下面介绍：
（一）传递数值
1.子组件：Header.vue
模板
差异
！-数据对象中没有msg属性，但是这里调用了父类传递的msg属性-
h2{{msg}}/h2
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
},
//接收父类传递的值
道具：[msg]
}
/脚本
正如您所看到的，在子组件的数据对象中没有msg属性。这里调用父类传递的msg属性，接收依赖于props: [msg]。
2.父组件Home.vue
模板
差异
！-2.使用子组件并将值传递给它们-
v字头：msg=msg/v字头
英国铁路公司
英国铁路公司
/div
/模板
脚本
//1.介绍子组件
从导入标题。/head . vue ；
导出默认值{
data() {
返回{
消息：“我是一个组件”
}
},
方法：{
},
组件：{
“v形头”:头部
},
//刷新页面时请求数据
已安装(){
}
}
/脚本
价值传递的核心思想是在使用子组件的地方加上要传递的价值：v-head :msg=msg/v-head。
（二）传递方法
传递方法的写法和传递数值一样，下面只写关键步骤：
父组件
模板
差异
！-2.使用子组件并将值传递给它们-
v字头：run=run/v字头
英国铁路公司
英国铁路公司
/div
/模板
脚本
//1.介绍子组件
从导入标题。/head . vue ；
导出默认值{
data() {
返回{
消息：“我是一个组件”
}
},
方法：{
run() {
alert(this . msg)；
}
},
组件：{
“v形头”:头部
},
//刷新页面时请求数据
已安装(){
}
}
/脚本
子组件
模板
差异
Button @click=run 接收父组件/按钮的方法
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
},
//接收父类传递的值
道具：[跑]
}
/脚本
（三）传递对象
传递对象的写法和传递数值一样，下面只写关键步骤：
父组件
模板
差异
！-2.使用子组件并将值传递给它们，其中这是主组件-
v字头：home=this/v字头
英国铁路公司
英国铁路公司
/div
/模板
脚本
//1.介绍子组件
从导入标题。/head . vue ；
导出默认值{
data() {
返回{
消息：“我是一个组件”
}
},
方法：{
run() {
alert(this . msg)；
}
},
组件：{
“v形头”:头部
},
//刷新页面时请求数据
已安装(){
}
}
/脚本
子组件
模板
差异
！-数据对象中没有msg属性，但是这里调用了父类传递的msg属性-
h2{{msg}}/h2
英国铁路公司
英国铁路公司
Button @click=run 接收父组件/按钮的方法
/div
/模板
脚本
导出默认值{
data() {
返回{
//调用传递的home组件的msg属性
味精：this.home.msg
}
},
方法：{
run() {
//调用传递的home组件的run()方法
this . home . run()；
}
},
//接收父类传递的值
道具：[home]
}
/脚本
（四）传递数值类型校验
道具：{
home :对象
}
其他和上面类似！
以上是边肖对Vue父子组件的详细讲解和集成。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
