请问这种数组类型的prop，是不是default都要写成函数形式呢？

就是用sliders传进来的data，在props中定义的时候default要写成data(){return []} 是不是以后凡是数组对象类型的都要这么写呢？非常感谢！

hpbrave 2018-12-14

源自：实战：Vue webapp首页开发 5-3 更新幻灯片

收起

2回答

卡布琦诺回答被采纳获得+3积分 2018-12-17 10:38:32

vue中，在父组件通过props传数组或对象类型值给子组件的时候，数组或对象的默认值应当由一个工厂函数返回，所以default是用函数表示。

例如数组我们要写成

proE: {
   type: Array,
   default(){
     return []
   }
}

对象我们要写成：

propE: {
  type: Object,
  default(){
    return {}
  }
}

希望可以帮到你！

收起回答

hpbrave 提问者 #1

好的非常感谢！

2018-12-17 11:22:59

卡布琦诺 2018-12-16 10:42:47

关于同学的问题，首先我们需要了解的是在vue中，data有三种写法：

第一种写法：

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            ……
        }
    })
</script>

第二种写法：

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data: function(){
            return {
                ……
            }
        }
    })
</script>

第三种写法：

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data() {
            return {
                ……
            }
        }
    })
</script>

这里的第三种是第二种的ES6写法

区别：

1、在简单的Vue实例中，没什么区别，因为app对象不会被复用

var app = new Vue({...})

2、在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数，因此就需要使用如下方式：

export default{
    data(){
            return { 
                ...
        }
    }
}

因此，这里不是因为是数组才这么写的，而是为了避免不让多处的组件共享同一data对象，只能返回函数。

希望可以帮到你！

收起回答

提问者 hpbrave #1

谢谢回复，不过好像我没有说明白问题。这个data不是组件中固定的代表数据项的data，而是一个自定义的data变量，由slider.vue中的父组件<me-slider :data="sliders">传给子组件。子组件在接收的时候就定义在props里，data: { type: Array, default(){ return []; } }。这个地方的default值定义为函数形式，肯定也是为了组件复用时，互不影响，但是props里还有接收的其他的参数啊，他们没有互相影响的问题么？就是不太明白，为什么单单这个变量的default值是用函数表示的。非常感谢！

2018-12-16 19:07:16