Vue小知识点

其实是个人Vue盲点的查漏补缺_(:з」∠)_，，，很多点官方文档里都有，Vue文档要字斟句酌啊。本来想叫“Vue最佳实践”的，，老脸一红，算了，算了

 

Prop

1、Prop如果为数组或对象类型，default值必须从函数中返回。这是为了保证不同component实例中propB都是独立的实例。

props: {
    propA: {
        type: Number,
        default: 100
    },
    propB: {
        type: Object,
        default: function () {
            return { a: 1 };
        }
    }
}

 2、非prop特性使用$attrs传递。传递给组件的属性，如果没有相应的prop定义，则该属性会放在$attrs中，常见的是基于html元素构建的基础组件，元素的原生属性可通过$attrs传递。

// 实际问题是对el-input再封装时，要透传原有属性，但发现placeholder，rows等属性并未生效
// 是因为这些原生属性在$attrs里，透传要兼顾$props和$attrs

<el-input v-bind="finalProps"></el-input>

computed: {
    finalProps () {
        const {$props, $attrs} = this;
        return {...$props, ...$attrs};
    }
}

写代码写着写着觉得背后一股凉意，转头，小哥一脸严肃，“来，往上翻，XXX行...嗯，这里不要这么写，要这样....”，然后，帅气的走掉了。。受教了_(:з」∠)_

攒了好多的，慢慢写，，，