快捷導(dǎo)航

分享Vue子組件接收父組件傳值的3種方式

更新時(shí)間：2022年03月29日 11:49:16 作者：什么都干的派森

這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數(shù)據(jù)的同時(shí)進(jìn)行?類型限制、接收數(shù)據(jù)的同時(shí)對(duì)?數(shù)據(jù)類型、必要性、默認(rèn)值?進(jìn)行限制相關(guān)內(nèi)容展開更多詳細(xì)的相關(guān)資料，需要的小伙伴可以參考一下

<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.簡(jiǎn)單聲明接收

<template>
?? ?<div>
?? ??? ?<div>子組件</div>
?? ??? ?<h2>學(xué)生姓名：{{ name }}</h2>
?? ??? ?<h2>年齡：{{ age }}</h2>
?? ?</div>
</template>

<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?
?? ??? ?// 簡(jiǎn)單聲明接收 ----------
?? ??? ?props: ['name', 'age']
?? ??? ?// ---------------------
?? ??? ?
?? ?}
</script>

2.接收數(shù)據(jù)的同時(shí)進(jìn)行類型限制

<template>
?? ?<div>
?? ??? ?<div>子組件</div>
?? ??? ?<h2>學(xué)生姓名：{{ name }}</h2>
?? ??? ?<h2>年齡：{{ age }}</h2>
?? ?</div>
</template>

<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?
?? ??? ?// 接收數(shù)據(jù)的同時(shí)進(jìn)行類型限制 ---
?? ??? ?props: {
?? ??? ??? ?name: String,
?? ??? ??? ?age: Number
?? ??? ?}
?? ??? ?// --------------------------
?? ??? ?
?? ?}
</script>

3.接收數(shù)據(jù)的同時(shí)對(duì) 數(shù)據(jù)類型、必要性、默認(rèn)值進(jìn)行限制

<template>
?? ?<div>
?? ??? ?<div>子組件</div>
?? ??? ?<h2>學(xué)生姓名：{{ name }}</h2>
?? ??? ?<h2>年齡：{{ age }}</h2>
?? ?</div>
</template>

<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?// 接收數(shù)據(jù)的同時(shí)對(duì) 數(shù)據(jù)類型、必要性、默認(rèn)值 進(jìn)行限制 -----
?? ??? ?props: {
?? ??? ??? ?name: {
?? ??? ??? ??? ?type: String,?? ? ?// name傳入類型必須為字符串
?? ??? ??? ??? ?required: true ? ?// name設(shè)為必傳字段
?? ??? ??? ?},
?? ??? ??? ?age: {
?? ??? ??? ??? ?type: Number,
?? ??? ??? ??? ?default: 233 ? ? ?// 默認(rèn)值
?? ??? ??? ?}
?? ??? ?},
?? ??? ?// ------------------------------------------------
?? ?}
</script>

到此這篇關(guān)于分享Vue子組件接收父組件傳值的3種方式的文章就介紹到這了,更多相關(guān)Vue子組件接收父組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: