Vue3中props傳參方式詳解
更新時間：2023年11月29日 14:24:20 作者：俊哥前端工程師
這篇文章主要為大家詳細介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
在Vue3中，`props`接收的`type`類型有以下幾種：
1. String：字符串類型
2. Number：數(shù)字類型
3. Boolean：布爾類型
4. Array：數(shù)組類型
5. Object：對象類型
6. Date：日期類型
7. Function：函數(shù)類型
8. Symbol：符號類型
9. [Custom Types]：自定義類型
你也可以使用數(shù)組形式來表示多種類型的組合，
比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
`props` 還有兩個參數(shù)：
default： 默認值
required： 是否必傳, true必傳，false 非必傳
開啟必傳時 若不傳則警告[Vue warn]: Missing required prop: "xxx"
父組件代碼（測試默認值）
<template>
<div style="font-size: 14px">
<h3>測試props傳參常見的數(shù)據(jù)類型</h3>
<Child :message="message" />
<!--
:count="count"
:isActive="isActive"
:list="list"
:user="user"
:date="date"
:callback="callback
-->
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
toRefs
} from 'vue'
import Child from './Child.vue'
// vue3.0語法
export default defineComponent({
name: '父組件名',
components: {
Child,
},
setup() {
// 在Vue3中，`props`接收的`type`類型有以下幾種：
// 1. String：字符串類型
// 2. Number：數(shù)字類型
// 3. Boolean：布爾類型
// 4. Array：數(shù)組類型
// 5. Object：對象類型
// 6. Date：日期類型
// 7. Function：函數(shù)類型
// 8. Symbol：符號類型
// 9. [Custom Types]：自定義類型
// 你也可以使用數(shù)組形式來表示多種類型的組合，
// 比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
// 另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
// 注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
const state = reactive({
date: new Date(1998, 12, 31),
message: 'Hello World',
count: 666,
isActive: true,
list: [1, 2, 3],
user: {
name: '張三',
age: 18,
},
callback: () => {
console.log('父組件傳入的callback執(zhí)行了')
},
})
onMounted(() => {
//
})
return {
...toRefs(state),
}
},
})
</script>子組件代碼
<template>
<div style="font-size: 14px">
<!-- 子組件內(nèi)容 -->
<p>message: {{ message }}</p>
<p>count: {{ count }}</p>
<p>isActive: {{ isActive }}</p>
<p>list: {{ list }}</p>
<p v-for="(item,index) in list" :key="index">{{ item }}</p>
<p>date: {{ date }}</p>
<p>user: {{ user }}</p>
<button @click="callback">callback按鈕(調(diào)用父組件函數(shù))</button>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
// vue3.0語法
export default defineComponent({
name: '子組件名',
props: {
message: {
type: String, // type 類型
required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
},
count: {
type: Number,
default: 0, // default 默認值
},
isActive: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
},
date: {
type: Date,
default: () => new Date(),
},
user: {
type: Object,
default: () => ({ name: 'John Doe', email: 'johndoe@mail.com' }),
},
callback: {
type: Function,
default: () => {},
},
},
setup(props) {
onMounted(() => {
console.log('props', props)
})
return {
//
}
},
})
</script>頁面數(shù)據(jù)顯示效果(只傳了必填項message)
可以看到，接收到的props只有message是父組件傳來的值，而子組件顯示的其它值都是定義在default里的默認值，點擊callback按鈕(調(diào)用父組件函數(shù))也是沒有任何反應(yīng)的。
修改父組件代碼(將各種數(shù)據(jù)類型傳入)
<template>
<div style="font-size: 14px">
<h3>測試props傳參常見的數(shù)據(jù)類型</h3>
<Child
:message="message"
:count="count"
:is-active="isActive"
:list="list"
:user="user"
:date="date"
:callback="callback"
/>
<!-- 兩種命名方式都可以
:is-active="isActive"
:isActive="isActive"
-->
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
toRefs
} from 'vue'
import Child from './Child.vue'
// vue3.0語法
export default defineComponent({
name: '父組件名',
components: {
Child,
},
setup() {
// 在Vue3中，`props`接收的`type`類型有以下幾種：
// 1. String：字符串類型
// 2. Number：數(shù)字類型
// 3. Boolean：布爾類型
// 4. Array：數(shù)組類型
// 5. Object：對象類型
// 6. Date：日期類型
// 7. Function：函數(shù)類型
// 8. Symbol：符號類型
// 9. [Custom Types]：自定義類型
// 你也可以使用數(shù)組形式來表示多種類型的組合，
// 比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
// 另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
// 注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
const state = reactive({
date: new Date(1998, 12, 31),
message: 'Hello World',
count: 666,
isActive: true,
list: [1, 2, 3],
user: {
name: '張三',
age: 18,
},
callback: () => {
console.log('父組件傳入的callback執(zhí)行了')
},
})
onMounted(() => {
//
})
return {
...toRefs(state),
}
},
})
</script>頁面數(shù)據(jù)顯示效果(各種數(shù)據(jù)類型傳入了)
可以看到數(shù)據(jù)將以父組件傳入的值為準，default的值被覆蓋。點擊callback按鈕(調(diào)用父組件函數(shù))也執(zhí)行了。
踩坑小案例
案例：父組件的數(shù)據(jù)是從接口異步請求來的 ,而子組件是會先掛載的，如果子組件接受的值是從父組件的接口里取來的，想在子組件onMounted的時候拿到這個數(shù)據(jù)來發(fā)請求卻沒拿到。
修改代碼（看下案例）：
父組件代碼
<template>
<div style="font-size: 14px">
<h3>測試props傳參常見的數(shù)據(jù)類型</h3>
<Child
:id="id"
:message="message"
:count="count"
:is-active="isActive"
:list="list"
:user="user"
:date="date"
:callback="callback"
/>
<!-- 兩種命名方式都可以
:is-active="isActive"
:isActive="isActive"
-->
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
toRefs
} from 'vue'
import Child from './Child.vue'
// vue3.0語法
export default defineComponent({
name: '父組件名',
components: {
Child,
},
setup() {
// 在Vue3中，`props`接收的`type`類型有以下幾種：
// 1. String：字符串類型
// 2. Number：數(shù)字類型
// 3. Boolean：布爾類型
// 4. Array：數(shù)組類型
// 5. Object：對象類型
// 6. Date：日期類型
// 7. Function：函數(shù)類型
// 8. Symbol：符號類型
// 9. [Custom Types]：自定義類型
// 你也可以使用數(shù)組形式來表示多種類型的組合，
// 比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
// 另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
// 注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
const state = reactive({
id: '',
date: new Date(1998, 12, 31),
message: '',
count: 666,
isActive: true,
list: [1, 2, 3],
user: {
name: '張三',
age: 18,
},
callback: () => {
console.log('父組件傳入的callback執(zhí)行了')
},
})
onMounted(() => {
// 模擬一個接口請求
setTimeout(() => {
state.id = '父組件請求接口得來的id'
}, 3000)
})
return {
...toRefs(state),
}
},
})
</script>子組件代碼：
<template>
<div style="font-size: 14px">
<!-- 子組件內(nèi)容 -->
<p>message: {{ message }}</p>
<p>count: {{ count }}</p>
<p>isActive: {{ isActive }}</p>
<p>list: {{ list }}</p>
<p v-for="(item,index) in list" :key="index">{{ item }}</p>
<p>date: {{ date }}</p>
<p>user: {{ user }}</p>
<button @click="callback">callback按鈕(調(diào)用父組件函數(shù))</button>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
// vue3.0語法
export default defineComponent({
name: '子組件名',
props: {
id: {
type: String, // type 類型
required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
},
message: {
type: String, // type 類型
required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
},
count: {
type: Number,
default: 0, // default 默認值
},
isActive: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
},
date: {
type: Date,
default: () => new Date(),
},
user: {
type: Object,
default: () => ({ name: 'John Doe', email: 'johndoe@mail.com' }),
},
callback: {
type: Function,
default: () => {},
},
},
setup(props) {
onMounted(() => {
console.log('props', props)
console.log('props.id:', props.id)
// 想拿到id后請求接口
// axios.get('props.id').then(res => {
// console.log(res)
// })
})
return {
//
}
},
})
</script>案例顯示效果(取不到id)
父組件請求接口的數(shù)據(jù)最終會在子組件更新，但是想在onMounted里使用卻是拿不到的，因為接口還沒請求完成，沒拿到該數(shù)據(jù)，我們來嘗試解決這個問題。
解決方案1(v-if)
修改父組件代碼：
<template>
<div style="font-size: 14px">
<h3>測試props傳參常見的數(shù)據(jù)類型</h3>
<Child
v-if="id"
:id="id"
:message="message"
:count="count"
:is-active="isActive"
:list="list"
:user="user"
:date="date"
:callback="callback"
/>
<!-- 兩種命名方式都可以
:is-active="isActive"
:isActive="isActive"
-->
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
toRefs
} from 'vue'
import Child from './Child.vue'
// vue3.0語法
export default defineComponent({
name: '父組件名',
components: {
Child,
},
setup() {
// 在Vue3中，`props`接收的`type`類型有以下幾種：
// 1. String：字符串類型
// 2. Number：數(shù)字類型
// 3. Boolean：布爾類型
// 4. Array：數(shù)組類型
// 5. Object：對象類型
// 6. Date：日期類型
// 7. Function：函數(shù)類型
// 8. Symbol：符號類型
// 9. [Custom Types]：自定義類型
// 你也可以使用數(shù)組形式來表示多種類型的組合，
// 比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
// 另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
// 注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
const state = reactive({
id: '',
date: new Date(1998, 12, 31),
message: '',
count: 666,
isActive: true,
list: [1, 2, 3],
user: {
name: '張三',
age: 18,
},
callback: () => {
console.log('父組件傳入的callback執(zhí)行了')
},
})
onMounted(() => {
// 模擬一個接口請求
setTimeout(() => {
state.id = '父組件請求接口得來的id'
}, 3000)
})
return {
...toRefs(state),
}
},
})
</script>解決方案1(v-if)頁面效果
在使用子組件的標簽上加上<Child v-if="id"/>，沒有拿到id時子組件并不會渲染，當然接口如果過慢的話子組件也會渲染更慢。
解決方案2(父組件不加v-if，子組件用watchEffect)
父組件代碼：
<template>
<div style="font-size: 14px">
<h3>測試props傳參常見的數(shù)據(jù)類型</h3>
<Child
:id="id"
:message="message"
:count="count"
:is-active="isActive"
:list="list"
:user="user"
:date="date"
:callback="callback"
/>
<!-- 兩種命名方式都可以
:is-active="isActive"
:isActive="isActive"
-->
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
toRefs
} from 'vue'
import Child from './Child.vue'
// vue3.0語法
export default defineComponent({
name: '父組件名',
components: {
Child,
},
setup() {
// 在Vue3中，`props`接收的`type`類型有以下幾種：
// 1. String：字符串類型
// 2. Number：數(shù)字類型
// 3. Boolean：布爾類型
// 4. Array：數(shù)組類型
// 5. Object：對象類型
// 6. Date：日期類型
// 7. Function：函數(shù)類型
// 8. Symbol：符號類型
// 9. [Custom Types]：自定義類型
// 你也可以使用數(shù)組形式來表示多種類型的組合，
// 比如`[String, Number]`表示接收字符串或數(shù)字類型的值。
// 另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。
// 注意：以上是常見的`type`類型列表，你也可以自定義其它類型。
const state = reactive({
id: '',
date: new Date(1998, 12, 31),
message: '',
count: 666,
isActive: true,
list: [1, 2, 3],
user: {
name: '張三',
age: 18,
},
callback: () => {
console.log('父組件傳入的callback執(zhí)行了')
},
})
onMounted(() => {
// 模擬一個接口請求
setTimeout(() => {
state.id = '父組件請求接口得來的id'
}, 3000)
})
return {
...toRefs(state),
}
},
})
</script>子組件代碼
<template>
<div style="font-size: 14px">
<!-- 子組件內(nèi)容 -->
<p>message: {{ message }}</p>
<p>count: {{ count }}</p>
<p>isActive: {{ isActive }}</p>
<p>list: {{ list }}</p>
<p v-for="(item,index) in list" :key="index">{{ item }}</p>
<p>date: {{ date }}</p>
<p>user: {{ user }}</p>
<button @click="callback">callback按鈕(調(diào)用父組件函數(shù))</button>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, watchEffect } from 'vue'
// vue3.0語法
export default defineComponent({
name: '子組件名',
props: {
id: {
type: String, // type 類型
required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
},
message: {
type: String, // type 類型
required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
},
count: {
type: Number,
default: 0, // default 默認值
},
isActive: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
},
date: {
type: Date,
default: () => new Date(),
},
user: {
type: Object,
default: () => ({ name: 'John Doe', email: 'johndoe@mail.com' }),
},
callback: {
type: Function,
default: () => {},
},
},
setup(props) {
onMounted(() => {
console.log('onMounted props', props)
console.log('onMounted props.id:', props.id)
// 想拿到id后請求接口
// axios.get('props.id').then(res => {
// console.log(res)
// })
})
watchEffect(() => {
console.log('watchEffect', props.id)
if (props.id) {
// 想拿到id后請求接口
// axios.get('props.id').then(res => {
// console.log(res)
// })
}
})
return {
//
}
},
})
</script>解決方案2watchEffect的頁面顯示效果
可以看到子組件的頁面依然會先掛載渲染，onMounted雖然拿不到值，但是可以在watchEffect里檢測到id有值了再做請求就行了。當然有其它的解決方案也歡迎評論區(qū)留言交流。
以上就是Vue3中props傳參方式詳解的詳細內(nèi)容，更多關(guān)于Vue3 props的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了如何在vue項目中使用百度地圖API，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
如何給element plus中動態(tài)form-item增加校驗的可行方法
文章主要介紹了ElementPlus中動態(tài)生成el-form-item時如何使用內(nèi)置校驗機制,通過設(shè)置prop屬性和使用行內(nèi)定義規(guī)則,結(jié)合v-model綁定響應(yīng)式數(shù)據(jù),實現(xiàn)動態(tài)表單項的校驗,還提到可以定義規(guī)則函數(shù)優(yōu)化代碼,并在提交時統(tǒng)一提示校驗未通過的錯誤2026-04-04
這篇文章主要為大家詳細介紹了VUE遞歸樹形實現(xiàn)多級列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue中.prettierrc文件的常見配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁面背景及背景圖片的相關(guān)資料,在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue項目實現(xiàn)文件下載進度條功能,本文通過具體實現(xiàn)代碼給大家介紹的非常詳細，需要的朋友可以參考下2021-09-09
Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實例,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
基于vue-cli vue-router搭建底部導(dǎo)航欄移動前端項目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動前端項目,項目中主要用了Flex布局，以及viewport相關(guān)知識，已達到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08