解决vue props传Array/Object类型值,子组件报错的情况

 更新时间:2020年11月07日 14:52:00   作者:linefate  
这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题:

Props with type Object/Array must use a factory function to return the default value.

1、在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候

2、如果子组件的props接收default为 ,如下

报错

原因:props default 数组/对象的默认值应当由一个工厂函数返回

解决:

补充知识:vue的props如何传多个参数

vue父作用域将数据传到子组件通过props进行传参,如果需要传多个参数可以数组形式赋值给props,通过这样子组件就可以获取父组件传体过来的多个参数了。

<div id="app">
 <ul >
 <todo-item v-for="(item,index) in arr" v-bind:todo="item" v-bind:index="index"></todo-item>
 </ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    Vue.component("todo-item",{
   props:['todo','index'],
 template:"<li>{{index}}:{{todo.text}}</li>" 
 })
 var app = new Vue({
   el:"#app",
   data:{
 arr: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ]
 }
 })
</script>

以上这篇解决vue props传Array/Object类型值,子组件报错的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    vscode 配置vue+vetur+eslint+prettier自动格式化功能

    这篇文章主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能,本文通过实例代码图文的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue自定义指令添加跟随鼠标光标提示框v-tooltip方式

    vue自定义指令添加跟随鼠标光标提示框v-tooltip方式

    这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 简单理解Vue条件渲染

    简单理解Vue条件渲染

    这篇文章主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue拖动截图功能的简单实现方法

    Vue拖动截图功能的简单实现方法

    最近项目上要做一个车牌识别的功能,就需要做拖动截图功能了,因为前段是vue,所以下面这篇文章主要给大家介绍了关于Vue拖动截图功能的简单实现方法,需要的朋友可以参考下
    2021-07-07
  • vue如何解决axios请求前端跨域问题

    vue如何解决axios请求前端跨域问题

    vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • 详解Vue如何支持JSX语法

    详解Vue如何支持JSX语法

    这篇文章主要介绍了详解Vue如何支持JSX语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vite多页面配置项目实战

    vite多页面配置项目实战

    vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue 如何使用递归组件

    vue 如何使用递归组件

    这篇文章主要介绍了vue 如何使用递归组件,帮助大家更好的理解和使用vue,完成开发需求,感兴趣的朋友可以了解下
    2020-10-10
  • Vue.extend 编程式插入组件的实现

    Vue.extend 编程式插入组件的实现

    这篇文章主要介绍了Vue.extend 编程式插入组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue3使用useDialog实现对话框的示例代码

    vue3使用useDialog实现对话框的示例代码

    在日常开发中,弹窗是常见的一个功能,本文主要介绍了vue3使用useDialog实现对话框的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01

最新评论