分享Vue子组件接收父组件传值的3种方式
更新时间：2022年03月29日 11:49:16 作者：什么都干的派森
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行 类型限制、接收数据的同时对 数据类型、必要性、默认值 进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
父组件代码↓
<template>
<div>
<div>父组件</div>
<Student :name="name" :age="age"></Student>
</div>
</template>
<script>
// 引入组件
import Student from './components/Student'
export default {
name: 'App',
components: {Student,},
data() {
return {
name: "张三",
age: 18
}
}
}
</script>1.简单声明接收
<template>
<div>
<div>子组件</div>
<h2>学生姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {}
},
// 简单声明接收 ----------
props: ['name', 'age']
// ---------------------
}
</script>2.接收数据的同时进行 类型限制
<template>
<div>
<div>子组件</div>
<h2>学生姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {}
},
// 接收数据的同时进行类型限制 ---
props: {
name: String,
age: Number
}
// --------------------------
}
</script>3.接收数据的同时对 数据类型、必要性、默认值 进行限制
<template>
<div>
<div>子组件</div>
<h2>学生姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {}
},
// 接收数据的同时对 数据类型、必要性、默认值 进行限制 -----
props: {
name: {
type: String, // name传入类型必须为字符串
required: true // name设为必传字段
},
age: {
type: Number,
default: 233 // 默认值
}
},
// ------------------------------------------------
}
</script>到此这篇关于分享Vue子组件接收父组件传值的3种方式的文章就介绍到这了,更多相关Vue子组件接收父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
这篇文章主要介绍了vue3.2+ts实现在方法中可调用的拟态框弹窗（类el-MessageBox）,这个需求最主要的是要通过方法去调用，为了像el-messagebox使用那样方便，需要的朋友可以参考下2022-12-12
浅析vue 函数配置项watch及函数 $watch 源码分享
这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要给大家介绍基于vue的分页原生写法，代码分为html部分和js部分，简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
详解Vue基于vue-quill-editor富文本编辑器使用心得
这篇文章主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
main.js是项目的入口文件，项目中所有的页面都会加载main.js，本文主要介绍了vue项目main.js配置及使用方法，非常具有实用价值，需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了vue3结合ts项目中使用mockjs示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)
突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue nextTick的原理解析，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论