关于vue.js:vue中-thisxx使用说明

5次阅读

共计 1644 个字符,预计需要花费 5 分钟才能阅读完成。

this.$xx 是零碎定义的属性, 罕用的: this.$message,this.$route,this.$router,this.$ref(已写过),this.$confirm,this.$emit,this.$store,this.$loading…

### 1.this.$confirm , this.$message

removeQuestion(id) {
      this.$confirm("确定删除吗?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "勾销",
        type: "warning",
      }).then(() => {
        AdminApi.library
          .removeQuestion({
            id: id,
            pageName: this.pageName,
          })
          .then((res) => {if (res.status == "200") {
              this.popVisible = false;
              this.$message.success("操作胜利!");
              this.getQuestionDict();}
          });
      });
    },
### 2.this.$router,this.$route

setTimeout(() => {this.$router.push("/enterprise/info/" + this.eid);
            }, 3000);


$this.$router.push()
获取参数:this.$route.params.userId

3.this.$emit
组件之间的通信 (模态框点击确定提交并敞开模态框)
### 4.this.$store  数据缓存
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {userId: localStorage.getItem('userId'),
        userEmail: localStorage.getItem('userEmail'),
        userMobile: localStorage.getItem('userMobile'),
    },
    getters: {isLogin(state) {return state.userId && state.userId > 0},
        userId(state) {return state.userId;},
        userEmail(state) {return state.userEmail;},
        userMobile(state) {return state.userMobile;}
    },
    mutations: {login(state, user) {
            state.userId = user.id;
            state.userEmail = user.email;
            state.userMobile = user.mobile;
            localStorage.setItem('userId', user.id);
            localStorage.setItem('userEmail', user.email);
            localStorage.setItem('userMobile', user.mobile);
        },
        logout(state) {
            state.userId = 0;
            state.userEmail = '';
            state.userMobile = '';
            localStorage.removeItem('userId');
            localStorage.removeItem('userEmail');
            localStorage.removeItem('userMobile');
        }
    }
})

export default store

应用:this.$store.commit("login", user);
     this.$store.getters.isLogin ? "是" : "否";
     this.form.operatorName = this.$store.getters.adminName;
正文完
 0