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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          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ù)傳遞分為三種情況:

          1. 父級(jí)向子級(jí)傳遞數(shù)據(jù)
          2. 子級(jí)向父級(jí)傳遞數(shù)據(jù)
          3. 非父子級(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ē)功能,需求如下所述:

          1. carts組件:包括購(gòu)物車(chē)商品,商品單價(jià)。
          2. counter組件中的計(jì)數(shù)器組件,設(shè)置數(shù)量可以改變總價(jià)。
          3. 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)必答。感謝閱讀!


          主站蜘蛛池模板: 午夜爽爽性刺激一区二区视频| 国产一区在线视频观看| 久久精品国产亚洲一区二区| 婷婷亚洲综合一区二区| 国产午夜精品一区二区三区| 在线观看一区二区精品视频| 日韩精品一区二区三区老鸭窝| 国产一区二区三区在线观看精品 | 国产一区二区在线观看视频| 91成人爽a毛片一区二区| 亚洲一区二区女搞男| 精品一区二区三区免费观看| 女人和拘做受全程看视频日本综合a一区二区视频 | 激情亚洲一区国产精品| 国产精品女同一区二区| 国产成人精品一区二区三区无码| 国产伦精品一区二区三区视频猫咪 | 一区二区三区精密机械| 蜜桃无码AV一区二区| 日韩精品无码一区二区中文字幕| 国产麻豆精品一区二区三区v视界 国产美女精品一区二区三区 | 视频在线观看一区二区三区| 日本一区二区三区在线看| 综合一区自拍亚洲综合图区| 国产伦精品一区二区| 日本精品一区二区三区四区| 亚洲国产精品一区二区九九 | 精品无码av一区二区三区| 亚洲av不卡一区二区三区| 人妻AV中文字幕一区二区三区| 少妇无码一区二区三区| 91精品一区二区综合在线| 亚洲国产欧美日韩精品一区二区三区| 亚洲熟妇成人精品一区| 国产成人高清亚洲一区久久| 一区二区三区日本视频| 国产在线精品一区二区中文| 一区二区中文字幕| 日韩精品人妻一区二区三区四区| 精品一区狼人国产在线| 91精品一区国产高清在线|