Vue3中props傳參方式詳解

更新時間：2023年11月29日 14:24:20 作者：俊哥前端工程師

這篇文章主要為大家詳細(xì)介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

父組件代碼（測試默認(rèn)值）
子組件代碼
頁面數(shù)據(jù)顯示效果(只傳了必填項message)
修改父組件代碼(將各種數(shù)據(jù)類型傳入)
頁面數(shù)據(jù)顯示效果(各種數(shù)據(jù)類型傳入了)
踩坑小案例
案例顯示效果(取不到id)
解決方案1(v-if)
解決方案1(v-if)頁面效果
解決方案2(父組件不加v-if，子組件用watchEffect)
解決方案2watchEffect的頁面顯示效果

在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：默認(rèn)值

required：是否必傳, true必傳，false 非必傳

開啟必傳時若不傳則警告[Vue warn]: Missing required prop: "xxx"

父組件代碼（測試默認(rèn)值）

<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 默認(rèn)值
    },
    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里的默認(rèn)值，點(diǎn)擊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ù)將以父組件傳入的值為準(zhǔn)，default的值被覆蓋。點(diǎn)擊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 默認(rèn)值
    },
    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里使用卻是拿不到的，因?yàn)榻涌谶€沒請求完成，沒拿到該數(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)頁面效果

在使用子組件的標(biāo)簽上加上<Child v-if="id"/>，沒有拿到id時子組件并不會渲染，當(dāng)然接口如果過慢的話子組件也會渲染更慢。

解決方案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 默認(rèn)值
    },
    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>