vue 使用过程中所遇到的各种问题

一、最近在封装组件的时候遇见的一个问题

在父组件上的值 如果不通过data中取得时候 为什么又是需要：data有时候不用

在子组件props中 type: [Number,String],

加上：代表数字类型 number

不加：代表字符串 string

父组件中countSize既可以使用number也可以使用string 子组件接受值

二、子组件保存  Props with type Object/Array must use a factory function to return the default value.

翻译成中文是  // 数组／对象的默认值应当由一个工厂函数返回

根据vue的规则进行如下更改

子组件设置默认返回值规范写法

三、el-upload上传插件关于上传文件类型的限制  限制excel表格参数配置

accept: {

  title: 'excel',

  extensions: 'xlc,xlm,xlt,xlw,xls,xlsx',

  mimeTypes: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'

},

关于更多input file控件限制上传文件类型设置

四、关于动态绑定class的写法

1.三元运算形式（俩种class样式切换）

:class="[isDisabled ? 'notSend' : 'send']"

2.是否添加 active class类名

:class="{'active':表达式（true或者false）}"

五、关于使用echarts时自定义导出图片按钮遇到的问题

先在按钮上定义一个click事件  方法名为exprotPicture

下发为方法具体内容：

exportPicture(){    //echarts 导出图片的function

    let myChart = echarts.init(document.getElementById('myChart'));  //获取echarts对象

    let url =myChart.getDataURL({    //获取图表数据url

            type:'png',     //图片类型

            backgroundColor:'white'    //图片背景色

      });

    let a =document.createElement('a');// 生成一个a元素

    let event =new MouseEvent('click');// 创建一个单击事件

    a.download ='交易概况';//下载图片的名称

    a.href =url;// 将生成的URL设置为a.href属性

    a.dispatchEvent(event);// 触发a的单击事件

}

六. 给组件的监听方法添加额外的参数

这里以 element 的input为例

let index = 2

<el-input v-model="value" @change="inputChange"></el-input>  //正常写法

<el-input v-model="value" @change="inputChange($event,index)"></el-input>  //增加了inputChange方法的回调值

七.封装组件如何继承组件的所有属性与方法

以el-table 举例

<el-table ref="selfTable" v-bind="$attrs" v-on="$listeners">

    <slot></slot>

</el-table>

各位大神忘勿喷，新手一个，有错误的地方请指出，会及时更改