详解vue父子组件间传值(props)
更新时间：2017年06月29日 10:03:32 作者：ygtq
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
先定义一个子组件，在组件中注册props
<template>
<div>
<div>{{message}}(子组件)</div>
</div>
</template>
<script>
export default {
props: {
message: String //定义传值的类型<br> }
}
</script>
<style>
</style>
在父组件中，引入子组件，并传入子组件内需要的值
<template>
<div>
<div>父组件</div>
<child :message="parentMsg"></child>
</div>
</template>
<script>
import child from './child' //引入child组件
export default {
data() {
return {
parentMsg: 'a message from parent' //在data中定义需要传入的值
}
},
components: {
child
}
}
</script>
<style>
</style>
这种方式只能由父向子传递，子组件不能更新父组件内的data
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,这篇文章主要给大家介绍了关于Vue子组件调用父组件事件的3种方法,需要的朋友可以参考下2024-01-01
vue created钩子函数与mounted钩子函数的用法区别
这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助2022-08-08
这篇文章主要介绍了Vue中$on和$emit的实现原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue init失败的简单解决方法-终极版,需要的朋友可以参考下2017-12-12
本篇文章给大家分享了vue添加删除元素的方法以及相关实例代码，有兴趣的朋友参考一下。2018-06-06
这篇文章主要介绍了vue+antv实现雷达图，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-12-12
这篇文章主要给大家介绍了关于前端vue3手动设置滚动条位置/自动定位的相关资料,文中通过代码介绍的非常详细,对大家学习学习或者使用vue3具有一定的参考解决价值,需要的朋友可以参考下2024-05-05
我们在开发过程中会碰到数据更新,但是页面却没有更新的情况,下面这篇文章主要给大家介绍了关于Vue数据更新页面却没有更新的几种情况以及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
Vue-router跳转和location.href的区别及说明
Vue Router是Vue.js官方的路由管理器,它允许我们通过定义路由来管理应用程序的不同视图和状态,Vue路由跳转主要有以下几种方式：<router-link>标签、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01
最新评论