vue中ref属性，prop属性，this.$emit使用方法，parseTime(js时间格式化)

ref属性

只要想历在vue中直接操作DOM元素，然必须用ref属性进行注册。通过`this.refs` 再跟注册时的名称来引用DOM元素
vef : 被用来给元素或子组件注册引用信息，通俗的讲使用ref可以获取DOM元素，也可以获取子组件示例对象。

语法：

ref='refName'     refName是自定义的名称

获取：this.$refs或this.$refs['refName']

prop属性

注：prop是只读的，vue底层会检测你对props的修改，如果修改了，控制台则会报错。

prop主要用于组件传值，他的工作是为了接收外面传过来的数据，与data,el,ref是一个级别的配置项

接收数据的三种方式：

1.只接收：prop:['name','age','sex']

2.接受并限制类型：prop:{"name":String}

3.限制类型，限制必要性，指定默认值： 

props: {

    open: {

      type: Boolean,

      default: false,

    },

    // 弹出层标题

    title: {

      type: String,

      default: "选择物料档案",

    },

    //是否单选

    isSingle: {

      type: Boolean,

      default: true,

    },

  }

this.$emit使用方法

this.$emit(’projectInfo‘,this.linkProjectInfoNum );

参数projectInfo[方法名]：表示父组件绑定的方法。

参数this.linkProjectInfoNum[项目编号]：表示传递给另一个页面的值，参数可以传多个。

<!--选择产品档案-->
    <MaterialSelect :open="productSelectOpen" @onSelected="handleProductSelected">

<--方法（父组件中）-->
handleProductSelected(list) {
      if (list && list.length > 0) {
        let material = list[0];
        this.form.productId = material.id;
        this.form.productName = material.name;
        this.form.productModel = material.model;
        this.form.productSpecification = material.specification;
      }
      this.productSelectOpen = false;
    },
   
<--子组件页面的方法-->
 handleSelect(row) {
      if (row) {
        this.selectedList = [];
        this.selectedList.push(row);
      }
      this.$emit('onSelected', this.selectedList);
    },

parseTime(js时间格式化)

这里面的scope.row中的这个row是不带s的。

<template slot-scope="scope">
       <span>{{ parseTime(scope.row.publishDatetime, '{y}-{m}-{d}') }}</span>
</template>

<--例子-->
<el-table-column  label="发布时间">
      <template slot-scope="scope">
        <span >{{parseTime(scope.row.publishDatetime,'{y}-{m}-{d}') }}</span>
      </template>
</el-table-column>