Vue3中props傳參（多種數據類型傳參方式）

Vue3中，`props`接收的`type`類型有以下幾種：

1. String：字符串類型

2. Number：數字類型

3. Boolean：布爾類型

4. Array：數組類型

5. Object：對象類型

6. Date：日期類型

7. Function：函數類型

8. Symbol：符號類型

9. [Custom Types]：自定義類型

你也可以使用數組形式來表示多種類型的組合，

比如`[String, Number]`表示接收字符串或數字類型的值。

另外，你還可以使用`null`或`undefined`來表示接收任意類型的值。

注意：以上是常見的`type`類型列表，你也可以自定義其它類型。

`props` 還有兩個參數：

default：默認值

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

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

父組件代碼（測試默認值）：

<template>
  <div style="font-size: 14px">
    <h3>測試props傳參常見的數據類型</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：數字類型
    // 3. Boolean：布爾類型
    // 4. Array：數組類型
    // 5. Object：對象類型
    // 6. Date：日期類型
    // 7. Function：函數類型
    // 8. Symbol：符號類型
    // 9. [Custom Types]：自定義類型
    // 你也可以使用數組形式來表示多種類型的組合，
    // 比如`[String, Number]`表示接收字符串或數字類型的值。
    // 另外，你還可以使用`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執行了')
      },
    })

    onMounted(()=> {
    //
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

子組件代碼：

<template>
  <div style="font-size: 14px">
    <!-- 子組件內容 -->
    <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按鈕(調用父組件函數)</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>

頁面數據顯示效果(只傳了必填項message)：

可以看到，接收到的props只有message是父組件傳來的值，而子組件顯示的其它值都是定義在default里的默認值，點擊callback按鈕(調用父組件函數)也是沒有任何反應的。

修改父組件代碼(將各種數據類型傳入)：

<template>
  <div style="font-size: 14px">
    <h3>測試props傳參常見的數據類型</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：數字類型
    // 3. Boolean：布爾類型
    // 4. Array：數組類型
    // 5. Object：對象類型
    // 6. Date：日期類型
    // 7. Function：函數類型
    // 8. Symbol：符號類型
    // 9. [Custom Types]：自定義類型
    // 你也可以使用數組形式來表示多種類型的組合，
    // 比如`[String, Number]`表示接收字符串或數字類型的值。
    // 另外，你還可以使用`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執行了')
      },
    })

    onMounted(()=> {
    //
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

頁面數據顯示效果(各種數據類型傳入了)：

可以看到數據將以父組件傳入的值為準，default的值被覆蓋。點擊callback按鈕(調用父組件函數)也執行了。

踩坑小案例：

案例：父組件的數據是從接口異步請求來的 ,而子組件是會先掛載的，如果子組件接受的值是從父組件的接口里取來的，想在子組件onMounted的時候拿到這個數據來發請求卻沒拿到。

修改代碼（看下案例）：

父組件代碼

<template>
  <div style="font-size: 14px">
    <h3>測試props傳參常見的數據類型</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：數字類型
    // 3. Boolean：布爾類型
    // 4. Array：數組類型
    // 5. Object：對象類型
    // 6. Date：日期類型
    // 7. Function：函數類型
    // 8. Symbol：符號類型
    // 9. [Custom Types]：自定義類型
    // 你也可以使用數組形式來表示多種類型的組合，
    // 比如`[String, Number]`表示接收字符串或數字類型的值。
    // 另外，你還可以使用`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執行了')
      },
    })

    onMounted(()=> {
      // 模擬一個接口請求
      setTimeout(()=> {
        state.id='父組件請求接口得來的id'
      }, 3000)
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

子組件代碼：

<template>
  <div style="font-size: 14px">
    <!-- 子組件內容 -->
    <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按鈕(調用父組件函數)</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)：

父組件請求接口的數據最終會在子組件更新，但是想在onMounted里使用卻是拿不到的，因為接口還沒請求完成，沒拿到該數據，我們來嘗試解決這個問題。

解決方案1(v-if)：

修改父組件代碼：

<template>
  <div style="font-size: 14px">
    <h3>測試props傳參常見的數據類型</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：數字類型
    // 3. Boolean：布爾類型
    // 4. Array：數組類型
    // 5. Object：對象類型
    // 6. Date：日期類型
    // 7. Function：函數類型
    // 8. Symbol：符號類型
    // 9. [Custom Types]：自定義類型
    // 你也可以使用數組形式來表示多種類型的組合，
    // 比如`[String, Number]`表示接收字符串或數字類型的值。
    // 另外，你還可以使用`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執行了')
      },
    })

    onMounted(()=> {
      // 模擬一個接口請求
      setTimeout(()=> {
        state.id='父組件請求接口得來的id'
      }, 3000)
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

解決方案1v-if>顯示效果：

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

解決方案2(父組件不加v-if，子組件用watchEffect)：

父組件代碼：

<template>
  <div style="font-size: 14px">
    <h3>測試props傳參常見的數據類型</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：數字類型
    // 3. Boolean：布爾類型
    // 4. Array：數組類型
    // 5. Object：對象類型
    // 6. Date：日期類型
    // 7. Function：函數類型
    // 8. Symbol：符號類型
    // 9. [Custom Types]：自定義類型
    // 你也可以使用數組形式來表示多種類型的組合，
    // 比如`[String, Number]`表示接收字符串或數字類型的值。
    // 另外，你還可以使用`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執行了')
      },
    })

    onMounted(()=> {
      // 模擬一個接口請求
      setTimeout(()=> {
        state.id='父組件請求接口得來的id'
      }, 3000)
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

子組件代碼

<template>
  <div style="font-size: 14px">
    <!-- 子組件內容 -->
    <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按鈕(調用父組件函數)</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有值了再做請求就行了。當然有其它的解決方案也歡迎評論區留言交流。

#前端#

、組件傳值的三種情況

我們可以把組件之間的數據傳遞分為三種情況：

父級向子級傳遞數據
子級向父級傳遞數據
非父子級傳遞數據

二、父級向子級傳值

父級可以通過屬性向自己傳遞數據，示例代碼如下所示：

 1 <!-- 父級 -->
 2 <template>
 3     <div>
 4         <Child :msg="message"></Child>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 import Child from "./components/Child.vue";
10 export default {
11     // 注冊組件
12     components:{Child},
13     data(){
14         return {
15             message:"hello child"
16         }
17     }
18 }
19 </script>
20 
21 <!-- 子級 -->
22 <template>
23     <h1>{{msg}}</h1>
24 </template>
25 
26 <script>
27 export default {
28     props:["msg"]
29 }
30 </script>

1.創建子組件，在src/components/文件夾下新建一個Child.vue2.Child.vue的中創建props，然后創建一個名為message的屬性

三、子級向父級傳值

子級想父級傳遞數據需要用自定義事件。

 1 <!-- 子級組件 -->
 2 <template>
 3     <button @click="sendData">sendData</button>
 4 </template>
 5 
 6 <script>
 7 export default {
 8     data(){
 9         return {
10             message:"hello father"
11         }
12     },
13     methods:{
14         sendData(){
15             this.$emit("sendData",this.message);
16         }
17     }
18 }
19 </script>

在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數

在父組件中的子標簽中監聽該自定義事件并添加一個響應該事件的處理方法

 1 <!-- 父級組件 -->
 2 <template>
 3     <div>
 4         <h1>子級的數據為：{{message}}</h1>
 5         <Child @sendData="sd"></Child>
 6     </div>
 7 </template>
 8 
 9 <script>
10 import Child from "./components/Child.vue";
11 export default {
12     // 注冊組件
13     components: { Child },
14     data() {
15         return {
16             message: ""
17         };
18     },
19     methods: {
20         sd(childData) {
21             this.message=childData;
22         }
23     }
24 };
25 </script>

四、非父子級組件傳值組件傳值

在src目錄中創建一個store.js文件用來統一存儲數據

 1 //store.js
 2 export default {
 3     state:{
 4         message:"hello vue"
 5     },
 6     setStateMessage(str){
 7         this.state.message=str;
 8     }
 9 }
10 
11 <!-- sister組件 -->
12 <template>
13     <h1>{{state.message}}</h1>
14 </template>
15 
16 <script>
17 import store from "../store.js"
18 export default {
19     data(){
20         return {
21             title:"sister組件",
22             state:store.state
23         }
24     }
25 }
26 </script>
27 
28 <!-- brother組件 -->
29 <template>
30     <div>
31         <button @click="changeData">change data</button>
32     </div>
33 </template>
34 
35 <script>
36 import store from "../store.js"
37 export default {
38     methods:{
39         changeData(){
40             store.setStateMessage("122");
41             console.log(store.state.message)
42         }
43     }
44 }
45 </script>

五、課后練習

使用組件化開發完成一個購物車功能，需求如下所述：

carts組件：包括購物車商品，商品單價。
counter組件中的計數器組件，設置數量可以改變總價。
control包括一個重置按鈕可以數量清零。

組件層級結構

├─App.vue
│    ├─control
│    ├─carts
│    │   ├─counter

【融職教育】在工作中學習，在學習中工作

sdoc也叫文檔注釋，是JS開發中的一把利器，主要用于為JS添加類型聲明，這樣我們就可以像寫TS一樣寫JS了。

我之前寫過一篇文章，講述了jsdoc的基礎用法。本篇文章，我們來看一個高級點的用法。我們來實現一個功能：根據函數的第一個參數，來確定剩余參數怎么傳。

我想實現如下函數，該函數用于向父窗口發送消息。它可以接收不確定個數的參數，其中第一個參數是eventType，該參數有固定的幾個可選值，剩余參數根據eventType的值來確定。

const sendEventToParentWindow=(eventType, ...args)=> {
  window.postMessage(
    JSON.stringify({ type: eventType, payload: args })
  )
}

首先，我們需要聲明一個類型

請看如下代碼。其中，@typedef 用于聲明一個類型，@property 用于聲明該類型包含的字段。

/**
 * @typedef CallEvent
 * @property {[calltype: string, telno: string, callid: string, queid: string, uudata: string]} OnAuthSuccess
 * @property {[calltype: string, telno: string, callid: string, queid: string, uudata: string]} OnCalling
 * @property {[calltype: string, telno: string, callid: string, queid: string, recfile: string, uudata: string]} OnCallConnect
 * @property {[calltype: string]} OnCallHangup
 * @property {[]} changeSeatState
 * @property {[]} changeIVR
 * @property {[]} changeConsult
 * @property {[]} socketConnected
 * @property {[telno: string, exinfo: string]} OnCustomCall
 * @property {[errcode: string]} OnCallReturn
 */

然后，我們來為以上函數添加類型聲明。

請看如下代碼。其中，@template 用于聲明泛型類型，我們定義了一個泛型T，它的值取自CallEvent對象的鍵。@param 用于聲明函數參數的類型，eventType的類型為泛型T，args的類型為CallEvent[T]，該類型由T的值決定。這個聲明，大家都能理解嗎？

/**
 * @template {keyof CallEvent} T
 * @param {T} eventType
 * @param  {CallEvent[T]} args
 */
const sendEventToParentWindow=(eventType, ...args) {}

現在，我們來調用以上函數試一試

當我們輸入括號后，編輯器提示我們，該函數有7種傳參方式。

當我們輸入引號后，編輯器提示出了第一個參數期望接收的值。

當我們輸入第一個參數后，編輯器給出了后面參數的提示，告訴我們還需5個參數，以及每個參數期望的類型。

當我們將changeIVR作為第一個參數時，編輯器提示我們，后面沒有需要傳的參數了。

大家說，是不是很酷？JS中很多拼寫錯誤都不會報錯，這增加了排查問題的難度。有了jsdoc，我們的拼寫錯誤將大幅減少。由于有了編輯器的智能提示，我們不需要把整個單詞都敲出來，這樣寫起來更爽了，不是嗎？

以上就是本文的全部內容，大家都學廢了嗎？大家如有不懂之處，歡迎評論區問我，我有問必答。感謝閱讀！

在線咨詢

上一篇：之江生物：公司開發的產品猴痘病毒核酸測定試劑盒已經獲
下一篇：Range范圍的調整及EXCEL單元格及圖表插入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue3中props傳參（多種數據類型傳參方式）

父組件代碼（測試默認值）：

子組件代碼：

頁面數據顯示效果(只傳了必填項message)：

修改父組件代碼(將各種數據類型傳入)：

頁面數據顯示效果(各種數據類型傳入了)：

踩坑小案例：

案例顯示效果(取不到id)：

解決方案1(v-if)：

解決方案1v-if>顯示效果：

解決方案2(父組件不加v-if，子組件用watchEffect)：

解決方案2watchEffect的頁面顯示效果：

、組件傳值的三種情況

二、父級向子級傳值

三、子級向父級傳值

四、非父子級組件傳值組件傳值

五、課后練習

首先，我們需要聲明一個類型

然后，我們來為以上函數添加類型聲明。

現在，我們來調用以上函數試一試

您的項目需求