Vue3中props传参(多种数据类型传参方式)

这篇具有很好参考价值的文章主要介绍了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 type array,vue相关语法,javascript,vue.js,前端

可以看到,接收到的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>

页面数据显示效果(各种数据类型传入了):

props type array,vue相关语法,javascript,vue.js,前端

可以看到数据将以父组件传入的值为准,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):

props type array,vue相关语法,javascript,vue.js,前端

父组件请求接口的数据最终会在子组件更新,但是想在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>

解决方案1(v-if)页面效果

props type array,vue相关语法,javascript,vue.js,前端

在使用子组件的标签上加上<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的页面显示效果:

props type array,vue相关语法,javascript,vue.js,前端

可以看到子组件的页面依然会先挂载渲染,onMounted虽然拿不到值,但是可以在watchEffect里检测到id有值了再做请求就行了。当然有其它的解决方案也欢迎评论区留言交流。文章来源地址https://www.toymoban.com/news/detail-778326.html

到了这里,关于Vue3中props传参(多种数据类型传参方式)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3通透教程【十八】TS为组件的props标注类型

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月16日
    浏览(36)
  • vue3 中使用 props, emits 并指定其类型与默认值

    前言 本文主要描述 vue3 中 defineProps 与 defineEmits 分别在 JS 环境和 TS 环境中的使用方法。 defineProps 的使用 defineProps 在使用的时候无需引入,默认是全局方法。 在 js 开发的 vue3 项目中使用 js 环境中使用与 vue2 的使用方法类似,只是选项式 API 换成了组合式 API。定义 props 类型

    2024年02月05日
    浏览(37)
  • 【Vue3】路由传参的几种方式

    路由导航有两种方式,分别是:声明式导航 和 编程式导航 参数分为query参数和params参数两种 1.传参 在路由路径后直接拼接 ?参数名:参数值 ,多组参数间使用 分隔。 如果参数值为变量,需要使用模版字符串。 2.接收与使用 1.传参 to不再传递字符,而是传一个对象,由于参数

    2024年02月21日
    浏览(51)
  • 数据结构:手撕图解单链表---phead的多种传参方式对比和辅助理解

    前面我们知道了顺序表,当顺序表的容量到达上限后就需要申请新的空间,而申请新空间就会遇到一些问题 1.当利用realloc函数进行申请新空间时,会涉及到开辟新空间–拷贝原有数据–释放原空间这三个步骤,而这三个步骤会有不小的损耗 2.增容一般是2倍的增长,势必会有

    2024年02月15日
    浏览(43)
  • 数据结构---手撕图解单链表---phead的多种传参方式对比和辅助理解

    前面我们知道了顺序表,当顺序表的容量到达上限后就需要申请新的空间,而申请新空间就会遇到一些问题 1.当利用realloc函数进行申请新空间时,会涉及到开辟新空间–拷贝原有数据–释放原空间这三个步骤,而这三个步骤会有不小的损耗 2.增容一般是2倍的增长,势必会有

    2024年02月17日
    浏览(48)
  • vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

     vue前端开发自学练习,Props数据传递-类型校验,默认值的设置! 实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认值的设定等等。下面给大家展示一下,源码。和实际的效果。 如图,

    2024年01月23日
    浏览(38)
  • 【Pytorch】学习记录分享2——Tensor基础,数据类型,及其多种创建方式

    pytorch 官方文档 1. 创建 Creating Tensor: 标量、向量、矩阵、tensor 2. 三种方法可以创建张量,一是通过列表(list),二是通过元组(tuple),三是通过Numpy的数组(array),基本创建代码如下: 张量相关属性查看的基本操作,后期遇到的张量结构都比较复杂,难以用肉眼直接看出,因此

    2024年02月04日
    浏览(51)
  • vue大坑:v-for的key以及props传参不当导致的闭包

    为什么props传参在模版中使用没问题,在函数中使用不变化 场景 当我们点击上方的月份时,会改变下方加载的卡片信息 代码: 父组件: 字组件 流程: 当我们点击月份的时候,会加载对应月份的子组件卡片 当我们点击某一个子组件的时候,会判断是否跳转 问题: 如果我们

    2023年04月14日
    浏览(38)
  • vue中父组件异步数据通过props方式传递给子组件,子组件接收不到的问题

    问题描述 组件化开发中经常用到父子组件的通信,父传子子传父等数据的操作,如果父组件的数据是发请求从后端获取的异步数据,那么父组件将这个数据传递给子组件的时候,因为是异步数据,就会出现父组件传递过去了,但是子组件mounted钩子初始情况下是接收不到的问

    2023年04月08日
    浏览(39)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包