Vue笔记

forEach循环中的this指向问题

forEach循环中的this表示循环的对象，会遮盖外层的this
如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this，是访问外层作用域中的this

//使用element=>{}的形式可以使this不被覆盖
this.tableData.forEach((element)=>{
              if(element.username == username){
                  this.$Axios({
                      method:'post',
                      url:this.$root.businessServer + "admin/updateCoinInfo",
                      //post方法参数使用data
                      data:{
                          username:element.username,
                          coin:element.coin,
                          ticket:element.ticket,
                          exp:element.exp,
                          is_vip:element.isVip,
                      }
                  }).then((res)=>{
                      console.log(res);
                  })
              }
          })

el-table-column嵌套使用el-select的问题

table是嵌套循环的表示方法，所以在select的model属性中，绑定的也是这一行的元素。

<el-table-column label="VIP">
      <template slot-scope="scope">
      <!-- v-model绑定的是这一行上的元素 -->
        <el-select v-model="scope.row.isVip" placeholder="请选择">
          <el-option value="1"></el-option>
          <el-option value="0"></el-option>
        </el-select>
      </template>
    </el-table-column>

VUE当前页面重新加载数据

第一种：

location. reload()

第二种：

this.$router.go(0)

第三种：
使用provide和inject的方式传递一个reload加载函数。

根组件App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  //provide 中的数据可传给子组件使用
  provide(){
    return {
      reload: this.reload
    }
  },
  data() {
    return{
      isRouterAlive: true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      //dom数据更新时调用 
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  }
}
</script>

子组件

//inject 获取父组件中provide的数据
inject:['reload'],
methods:{
        removeAdmin(username){
            ......
            this.reload();
        }
    }

ref属性

在vue中可以为每一个标签设置一个ref属性，这样这个标签就放在了全局的this.$refs中

<input class="docUploader" type="file" ref="docFileUploader"/>

this.$refs.docFileUploader.click();

this.$route

首先利用this.$router实现路遥的跳转，可以设置path，query，params等值，即该路由携带的一些信息

this.$router.push({
    path: '/uploadFileInfo',
    query: {
        fileInfo: response.msg,
    }
});

在该路由下可以使用下面类似的方式取出router中的一些相关信息

this.$route.query.fileInfo.name,

Vue.use()和Vue.prototype.$xxx的区别

Vue.use(plugin)
引入插件，可以在全局中引入插件的内容，如果需要使用插件中的对象，使用this.$xxx。

总结

Vue的插件是一个对象, 就像Element.
插件对象必须有install字段.
install字段是一个函数.
初始化插件对象需要通过Vue.use()
访问使用this.$xxx

Vue.prototype.$xxx

避免在全局引入插件，而只是引用插件的对象，需要使用时，调用this.$xxx.xxx调用方法或者对象。