此处vue.js的methods中,this[attr]是什么用法

Question

组件template:

<my-dialog :is-show="isShowLogDialog" @click="closeDialog('isShowLogDialog')">
</my-dialog>

组件引入:

import MyDialog from './base/dialog'

组件data:

data () {
    return {
      isShowLogDialog: false,
    }

组件methods:

 methods: {
    closeDialog (attr) {
      this[attr] = false
 },

请问:这里methods里的this[attr]是什么用法?官方文档没找着,这个this也是指代vue实例对象吧

Answer 1

this[attr]， 其实是原生js 里面获取对象属性的方法,或者给对象属性赋值。
获取对象属性有点方法和中括号方法.
中括号法可以用变量作为属性名,点方法旧不可以，即：

var objVue = {};
objVue.isShowLogDialog  = false;
var arg = 'isShowLogDialog'    // 这里就可以代表传入的任何参数 
console.log(objVue.arg)    // undefined
console.log(objVue[arg])   // false;

《高程3》里面 记得推荐使用 点方法，效率高

Answer 2

这里的attr就是data 对象的某个key

比如 问题中的 isShowLogDialog

一般写成：this.isShowLogDialog=false
但如果这个 attr 想动态传参，就不能用 . 而只能用[]
于是就只成this[attr]=false;

Answer 3

this指vue实例对象;
看template，当点击的时候，会触发closeDialog('isShowLogDialog')，所以此时的methods里面的closeDialog的attr参数是'isShowLogDialog'，this[attr] = false也就是this['isShowLogDialog'] = false;
因为template里面:is-show="isShowLogDialog"，当isShowLogDialog被设置成false的时候，也就关闭了对话框。