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的页面显示效果：

、组件传值的三种情况

二、父级向子级传值

三、子级向父级传值

四、非父子级组件传值组件传值

五、课后练习

首先，我们需要声明一个类型

然后，我们来为以上函数添加类型声明。

现在，我们来调用以上函数试一试

您的项目需求