1

这一段时间在用Vue写项目,在学习通过prop给组件传值时遇到了问题。
我希望给prop的属性一个默认值,这样在我自定义props验证不通过和没有传值的时候也能有显示效果

我参考了官方的 prop-deafult 去给与一个默认值,
但是我在调用的时候没有传值进去且default也没有起作用

子组件声明-HTML:

<div v-for="(item,key) in arrList" :key="key">
    <img :src="item.img">
</div>

Script:

  props:{
        arrList:{
            type:Array,
            default:this.demoArr
        }},
    data(){
        return{
            demoArr:[
                {title:"This is 01 title",price:"100",img:require('@/assets/example-pic/examplePic01.png')},]}
</div>

父页面的引用

<Itembrief></Itembrief>

运行结果
运行结果


可以看到是没有数据的,也就是说default也没有生效....
虽然我自己有一个比较笨的办法可以解决,但是还是想知道为什么default没有生效
不清楚是否需要用官方文档中构造函数的例子去使用

6月13日提问
4 个回答
1

已采纳

对象或数组,default要指定工厂函数返回

clipboard.png

1

注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
文档这里

1

感谢两位 @Reming @fsme
这个题目的答案就是结合两位的答案即可解出

我在学习中没有理解透

注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

的含义。简单的说就是在 props-default里面无法引用到 data的数据,所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象

props{
 arrList:{
            type:[Array,Object]
            default:function(){
                return [
                {x=...,y=....}
                {.....}
            ] 
          }
      }
  }
0

搞不懂了,segmentfault 什么时候变得这么随意,你看代码区块颜色是让人看得吗,晕倒

该答案已被忽略,原因:不符合答题规范:内容不是答案,可用评论、投票替代

撰写答案

推广链接