Vue3中props傳參（多種數(shù)據(jù)類(lèi)型傳參方式）

Vue3中，`props`接收的`type`類(lèi)型有以下幾種：

1. String：字符串類(lèi)型

2. Number：數(shù)字類(lèi)型

3. Boolean：布爾類(lèi)型

4. Array：數(shù)組類(lèi)型

5. Object：對(duì)象類(lèi)型

6. Date：日期類(lèi)型

7. Function：函數(shù)類(lèi)型

8. Symbol：符號(hào)類(lèi)型

9. [Custom Types]：自定義類(lèi)型

你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，

比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。

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

注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。

`props` 還有兩個(gè)參數(shù)：

default：默認(rèn)值

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

開(kāi)啟必傳時(shí) 若不傳則警告[Vue warn]: Missing required prop: "xxx"

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

<template>
  <div style="font-size: 14px">
    <h3>測(cè)試props傳參常見(jiàn)的數(shù)據(jù)類(lèi)型</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語(yǔ)法
export default defineComponent({
  name: '父組件名',
  components: {
    Child,
  },
  setup() {
    // 在Vue3中，`props`接收的`type`類(lèi)型有以下幾種：
    // 1. String：字符串類(lèi)型
    // 2. Number：數(shù)字類(lèi)型
    // 3. Boolean：布爾類(lèi)型
    // 4. Array：數(shù)組類(lèi)型
    // 5. Object：對(duì)象類(lèi)型
    // 6. Date：日期類(lèi)型
    // 7. Function：函數(shù)類(lèi)型
    // 8. Symbol：符號(hào)類(lèi)型
    // 9. [Custom Types]：自定義類(lèi)型
    // 你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，
    // 比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。
    // 另外，你還可以使用`null`或`undefined`來(lái)表示接收任意類(lèi)型的值。
    // 注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。
    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語(yǔ)法
export default defineComponent({
  name: '子組件名',
  props: {
    message: {
      type: String, // type 類(lèi)型
      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>

頁(yè)面數(shù)據(jù)顯示效果(只傳了必填項(xiàng)message)：

可以看到，接收到的props只有message是父組件傳來(lái)的值，而子組件顯示的其它值都是定義在default里的默認(rèn)值，點(diǎn)擊callback按鈕(調(diào)用父組件函數(shù))也是沒(méi)有任何反應(yīng)的。

修改父組件代碼(將各種數(shù)據(jù)類(lèi)型傳入)：

<template>
  <div style="font-size: 14px">
    <h3>測(cè)試props傳參常見(jiàn)的數(shù)據(jù)類(lèi)型</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語(yǔ)法
export default defineComponent({
  name: '父組件名',
  components: {
    Child,
  },
  setup() {
    // 在Vue3中，`props`接收的`type`類(lèi)型有以下幾種：
    // 1. String：字符串類(lèi)型
    // 2. Number：數(shù)字類(lèi)型
    // 3. Boolean：布爾類(lèi)型
    // 4. Array：數(shù)組類(lèi)型
    // 5. Object：對(duì)象類(lèi)型
    // 6. Date：日期類(lèi)型
    // 7. Function：函數(shù)類(lèi)型
    // 8. Symbol：符號(hào)類(lèi)型
    // 9. [Custom Types]：自定義類(lèi)型
    // 你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，
    // 比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。
    // 另外，你還可以使用`null`或`undefined`來(lái)表示接收任意類(lèi)型的值。
    // 注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。
    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>

頁(yè)面數(shù)據(jù)顯示效果(各種數(shù)據(jù)類(lèi)型傳入了)：

可以看到數(shù)據(jù)將以父組件傳入的值為準(zhǔn)，default的值被覆蓋。點(diǎn)擊callback按鈕(調(diào)用父組件函數(shù))也執(zhí)行了。

踩坑小案例：

案例：父組件的數(shù)據(jù)是從接口異步請(qǐng)求來(lái)的 ,而子組件是會(huì)先掛載的，如果子組件接受的值是從父組件的接口里取來(lái)的，想在子組件onMounted的時(shí)候拿到這個(gè)數(shù)據(jù)來(lái)發(fā)請(qǐng)求卻沒(méi)拿到。

修改代碼（看下案例）：

父組件代碼

<template>
  <div style="font-size: 14px">
    <h3>測(cè)試props傳參常見(jiàn)的數(shù)據(jù)類(lèi)型</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語(yǔ)法
export default defineComponent({
  name: '父組件名',
  components: {
    Child,
  },
  setup() {
    // 在Vue3中，`props`接收的`type`類(lèi)型有以下幾種：
    // 1. String：字符串類(lèi)型
    // 2. Number：數(shù)字類(lèi)型
    // 3. Boolean：布爾類(lèi)型
    // 4. Array：數(shù)組類(lèi)型
    // 5. Object：對(duì)象類(lèi)型
    // 6. Date：日期類(lèi)型
    // 7. Function：函數(shù)類(lèi)型
    // 8. Symbol：符號(hào)類(lèi)型
    // 9. [Custom Types]：自定義類(lèi)型
    // 你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，
    // 比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。
    // 另外，你還可以使用`null`或`undefined`來(lái)表示接收任意類(lèi)型的值。
    // 注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。
    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(()=> {
      // 模擬一個(gè)接口請(qǐng)求
      setTimeout(()=> {
        state.id='父組件請(qǐng)求接口得來(lái)的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語(yǔ)法
export default defineComponent({
  name: '子組件名',
  props: {
    id: {
      type: String, // type 類(lèi)型
      required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
    },
    message: {
      type: String, // type 類(lèi)型
      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后請(qǐng)求接口
      // axios.get('props.id').then(res=> {
      //   console.log(res)
      // })
    })
    return {
      //
    }
  },
})
</script>

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

父組件請(qǐng)求接口的數(shù)據(jù)最終會(huì)在子組件更新，但是想在onMounted里使用卻是拿不到的，因?yàn)榻涌谶€沒(méi)請(qǐng)求完成，沒(méi)拿到該數(shù)據(jù)，我們來(lái)嘗試解決這個(gè)問(wèn)題。

解決方案1(v-if)：

修改父組件代碼：

<template>
  <div style="font-size: 14px">
    <h3>測(cè)試props傳參常見(jiàn)的數(shù)據(jù)類(lèi)型</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語(yǔ)法
export default defineComponent({
  name: '父組件名',
  components: {
    Child,
  },
  setup() {
    // 在Vue3中，`props`接收的`type`類(lèi)型有以下幾種：
    // 1. String：字符串類(lèi)型
    // 2. Number：數(shù)字類(lèi)型
    // 3. Boolean：布爾類(lèi)型
    // 4. Array：數(shù)組類(lèi)型
    // 5. Object：對(duì)象類(lèi)型
    // 6. Date：日期類(lèi)型
    // 7. Function：函數(shù)類(lèi)型
    // 8. Symbol：符號(hào)類(lèi)型
    // 9. [Custom Types]：自定義類(lèi)型
    // 你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，
    // 比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。
    // 另外，你還可以使用`null`或`undefined`來(lái)表示接收任意類(lèi)型的值。
    // 注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。
    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(()=> {
      // 模擬一個(gè)接口請(qǐng)求
      setTimeout(()=> {
        state.id='父組件請(qǐng)求接口得來(lái)的id'
      }, 3000)
    })

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

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

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

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

父組件代碼：

<template>
  <div style="font-size: 14px">
    <h3>測(cè)試props傳參常見(jiàn)的數(shù)據(jù)類(lèi)型</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語(yǔ)法
export default defineComponent({
  name: '父組件名',
  components: {
    Child,
  },
  setup() {
    // 在Vue3中，`props`接收的`type`類(lèi)型有以下幾種：
    // 1. String：字符串類(lèi)型
    // 2. Number：數(shù)字類(lèi)型
    // 3. Boolean：布爾類(lèi)型
    // 4. Array：數(shù)組類(lèi)型
    // 5. Object：對(duì)象類(lèi)型
    // 6. Date：日期類(lèi)型
    // 7. Function：函數(shù)類(lèi)型
    // 8. Symbol：符號(hào)類(lèi)型
    // 9. [Custom Types]：自定義類(lèi)型
    // 你也可以使用數(shù)組形式來(lái)表示多種類(lèi)型的組合，
    // 比如`[String, Number]`表示接收字符串或數(shù)字類(lèi)型的值。
    // 另外，你還可以使用`null`或`undefined`來(lái)表示接收任意類(lèi)型的值。
    // 注意：以上是常見(jiàn)的`type`類(lèi)型列表，你也可以自定義其它類(lèi)型。
    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(()=> {
      // 模擬一個(gè)接口請(qǐng)求
      setTimeout(()=> {
        state.id='父組件請(qǐng)求接口得來(lái)的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語(yǔ)法
export default defineComponent({
  name: '子組件名',
  props: {
    id: {
      type: String, // type 類(lèi)型
      required: true, // required 是否必傳, true必傳 若不傳則警告[Vue warn]: Missing required prop: "message"
    },
    message: {
      type: String, // type 類(lèi)型
      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后請(qǐng)求接口
      // axios.get('props.id').then(res=> {
      //   console.log(res)
      // })
    })
    watchEffect(()=> {
      console.log('watchEffect', props.id)
      if (props.id) {
        // 想拿到id后請(qǐng)求接口
        // axios.get('props.id').then(res=> {
        //   console.log(res)
        // })
      }
    })
    return {
      //
    }
  },
})
</script>

解決方案2watchEffect的頁(yè)面顯示效果：

可以看到子組件的頁(yè)面依然會(huì)先掛載渲染，onMounted雖然拿不到值，但是可以在watchEffect里檢測(cè)到id有值了再做請(qǐng)求就行了。當(dāng)然有其它的解決方案也歡迎評(píng)論區(qū)留言交流。

#前端#

、組件傳值的三種情況

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

父級(jí)向子級(jí)傳遞數(shù)據(jù)
子級(jí)向父級(jí)傳遞數(shù)據(jù)
非父子級(jí)傳遞數(shù)據(jù)

二、父級(jí)向子級(jí)傳值

父級(jí)可以通過(guò)屬性向自己傳遞數(shù)據(jù)，示例代碼如下所示：

 1 <!-- 父級(jí) -->
 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     // 注冊(cè)組件
12     components:{Child},
13     data(){
14         return {
15             message:"hello child"
16         }
17     }
18 }
19 </script>
20 
21 <!-- 子級(jí) -->
22 <template>
23     <h1>{{msg}}</h1>
24 </template>
25 
26 <script>
27 export default {
28     props:["msg"]
29 }
30 </script>

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

三、子級(jí)向父級(jí)傳值

子級(jí)想父級(jí)傳遞數(shù)據(jù)需要用自定義事件。

 1 <!-- 子級(jí)組件 -->
 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>

在響應(yīng)該點(diǎn)擊事件的函數(shù)中使用$emit來(lái)觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)

在父組件中的子標(biāo)簽中監(jiān)聽(tīng)該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法

 1 <!-- 父級(jí)組件 -->
 2 <template>
 3     <div>
 4         <h1>子級(jí)的數(shù)據(jù)為：{{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     // 注冊(cè)組件
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>

四、非父子級(jí)組件傳值組件傳值

在src目錄中創(chuàng)建一個(gè)store.js文件用來(lái)統(tǒng)一存儲(chǔ)數(shù)據(jù)

 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>

五、課后練習(xí)

使用組件化開(kāi)發(fā)完成一個(gè)購(gòu)物車(chē)功能，需求如下所述：

carts組件：包括購(gòu)物車(chē)商品，商品單價(jià)。
counter組件中的計(jì)數(shù)器組件，設(shè)置數(shù)量可以改變總價(jià)。
control包括一個(gè)重置按鈕可以數(shù)量清零。

組件層級(jí)結(jié)構(gòu)

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

【融職教育】在工作中學(xué)習(xí)，在學(xué)習(xí)中工作

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

我之前寫(xiě)過(guò)一篇文章，講述了jsdoc的基礎(chǔ)用法。本篇文章，我們來(lái)看一個(gè)高級(jí)點(diǎn)的用法。我們來(lái)實(shí)現(xiàn)一個(gè)功能：根據(jù)函數(shù)的第一個(gè)參數(shù)，來(lái)確定剩余參數(shù)怎么傳。

我想實(shí)現(xiàn)如下函數(shù)，該函數(shù)用于向父窗口發(fā)送消息。它可以接收不確定個(gè)數(shù)的參數(shù)，其中第一個(gè)參數(shù)是eventType，該參數(shù)有固定的幾個(gè)可選值，剩余參數(shù)根據(jù)eventType的值來(lái)確定。

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

首先，我們需要聲明一個(gè)類(lèi)型

請(qǐng)看如下代碼。其中，@typedef 用于聲明一個(gè)類(lèi)型，@property 用于聲明該類(lèi)型包含的字段。

/**
 * @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
 */

然后，我們來(lái)為以上函數(shù)添加類(lèi)型聲明。

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

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

現(xiàn)在，我們來(lái)調(diào)用以上函數(shù)試一試

當(dāng)我們輸入括號(hào)后，編輯器提示我們，該函數(shù)有7種傳參方式。

當(dāng)我們輸入引號(hào)后，編輯器提示出了第一個(gè)參數(shù)期望接收的值。

當(dāng)我們輸入第一個(gè)參數(shù)后，編輯器給出了后面參數(shù)的提示，告訴我們還需5個(gè)參數(shù)，以及每個(gè)參數(shù)期望的類(lèi)型。

當(dāng)我們將changeIVR作為第一個(gè)參數(shù)時(shí)，編輯器提示我們，后面沒(méi)有需要傳的參數(shù)了。

大家說(shuō)，是不是很酷？JS中很多拼寫(xiě)錯(cuò)誤都不會(huì)報(bào)錯(cuò)，這增加了排查問(wèn)題的難度。有了jsdoc，我們的拼寫(xiě)錯(cuò)誤將大幅減少。由于有了編輯器的智能提示，我們不需要把整個(gè)單詞都敲出來(lái)，這樣寫(xiě)起來(lái)更爽了，不是嗎？

以上就是本文的全部?jī)?nèi)容，大家都學(xué)廢了嗎？大家如有不懂之處，歡迎評(píng)論區(qū)問(wèn)我，我有問(wèn)必答。感謝閱讀！

在線咨詢

上一篇：之江生物：公司開(kāi)發(fā)的產(chǎn)品猴痘病毒核酸測(cè)定試劑盒已經(jīng)獲
下一篇：Range范圍的調(diào)整及EXCEL單元格及圖表插入

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

Vue3中props傳參（多種數(shù)據(jù)類(lèi)型傳參方式）

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

子組件代碼：

頁(yè)面數(shù)據(jù)顯示效果(只傳了必填項(xiàng)message)：

修改父組件代碼(將各種數(shù)據(jù)類(lèi)型傳入)：

頁(yè)面數(shù)據(jù)顯示效果(各種數(shù)據(jù)類(lèi)型傳入了)：

踩坑小案例：

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

解決方案1(v-if)：

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

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

解決方案2watchEffect的頁(yè)面顯示效果：

、組件傳值的三種情況

二、父級(jí)向子級(jí)傳值

三、子級(jí)向父級(jí)傳值

四、非父子級(jí)組件傳值組件傳值

五、課后練習(xí)

首先，我們需要聲明一個(gè)類(lèi)型

然后，我們來(lái)為以上函數(shù)添加類(lèi)型聲明。

現(xiàn)在，我們來(lái)調(diào)用以上函數(shù)試一試

您的項(xiàng)目需求