分享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子組件接收父組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: