vue小知识

1.子组件 调用 父组件
2.父组件 调用 子组件
3.遍历对象
4.文件上传
5.一些组件的事件无法触发（.native）
6.表格行删除
7.表格行上移
8.表格行下移

 

---

 

1.子组件 调用 父组件

// change是父组件声明的@change，可自定义命名。第二个参数是传给父组件的参数
this.$emit('change', this.currentValue);

 

2.父组件 调用 子组件

// boilerList是ref='boilerList'。showTableConfigPage是子组件的方法
this.$refs.boilerList.showTableConfigPage();

 

3.遍历对象

for (let key of Object.keys(that.formObject)) {
    formData.append(key, that.formObject[key])
}

 

4.文件上传

<input type="file" size="small" value="" ref="selFile" id="file" @change="uploadApkFile">

//  methods:
uploadApkFile(e) {
    this.myFile = e.target.files[0]
},
saveInfo(){
    const that = this
    if (this.myFile == null) {
        this.$Modal.error({
            title: '提示',
            content: '请先选择要上传的文件.'
        });
    } else {
        let formData = new FormData();
        formData.append('file', that.myFile);
        for (let key of Object.keys(that.formObject)) {
            formData.append(key, that.formObject[key])
        }
        let config = {
            headers:{'Content-Type':'multipart/form-data'}
        }
        const xhr = new XMLHttpRequest()
        xhr.open('POST',baseUrl+that.url, true)  //server url自行填充，true代表异步
        xhr.onload = () => {
            const response = JSON.parse(xhr.response)//response就是服务器返回的信息
            if (response.isSuccess) {
              that.$Modal.success({
                title: '成功',
                content: '保存成功',
                width: 300
              });
            } else {
              that.$Modal.error({
                title: '提示',
                content: response.errorMsg,
                width: 300
              });
            }
        }
        xhr.send(formData)//执行发送指令
    }
}

 

5.一些组件的事件无法触发（.native）

.native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。

官网的解释：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲  ：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

如：
<Input @click.native="selInmList" type="text" v-model="instname"/>
<input@click="selInmList" type="text" v-model="instname"/>
因为Input不是普通的HTML标签，所以要加.native才会触发click事件。input就不用

 

6.表格行删除

delRep(params){  // 删除
    let that = this
    this.$Modal.confirm({
      title: '确认提示',
      content : "确定要删除该行数据？",
      onOk : function(){
        that.dataList.splice(params.index, 1);
      }
    })
}

 

7.表格行上移

  upRow(params){   // 上移
    const index = params.index
    if (index === 0) {
      //第一行，不能再上移
    } else {
      let temp = this.dataList[index - 1]
      this.$set(this.dataList, index - 1, this.dataList[index])
      this.$set(this.dataList, index, temp)
    }
  }

 

8.表格行下移

  downRow(params){   // 下移
    const index = params.index
    if (index === (this.dataList.length - 1)) {
      //最后一行，不能再下移
    } else {
      let temp = this.dataList[index + 1]
      this.$set(this.dataList, index + 1, this.dataList[index])
      this.$set(this.dataList, index, temp)
    }
  }