子组件修改实例, 控制v-if 失效的问题

Question

// 父组件创建的实例
const SelectMenuData = new SelectMenu()

父组件子组件
<oneVue      v-if='SelectMenuData.show'        />

// 实例代码
class SelectMenu {
    show: Ref<boolean>
    constructor() {
        this.show = ref(false)
    }
    click() { // 点击显示
        if (this.show.value)  return this.show.value = false // 如果已经显示则关闭
        this.show.value = true
        document.addEventListener('mousedown', this.closeMenu)
    }
   // 这里会出问题,调用时,有时会报错,
    closeMenu() {
        console.log('this.show.value:', this.show) // 这里this.show.value: 为什么会有时是undefined
        this.show.value = false
        document.removeEventListener('mousedown', this.closeMenu)
    }
}

上述错误解决了, 还是没用啊
,v-if='SelectMenuData.show'   不生效, 
closeMenu() 方法改了this.show.value 
SelectMenuData.show 这个值改false了, 此组件还是显示

Answer 1

参考GPT和自己的思路：

问题的根本在于在 closeMenu 方法中的 this 关键字。在这个方法中，this 指向的是 document 对象，而不是 SelectMenu 实例对象。因此，this.show.value 会报错，因为 document 对象上并没有 show 属性。

解决这个问题的简单方法是，将 closeMenu 方法的 this 绑定到 SelectMenu 实例上，可以使用 bind 方法或箭头函数实现：

1. 使用 bind

class SelectMenu {
    // ...
    constructor() {
        // ...
        this.closeMenu = this.closeMenu.bind(this)
    }
   // ...
}

1. 使用箭头函数

class SelectMenu {
    // ...
    constructor() {
        // ...
        this.closeMenu = () => {
            console.log('this.show.value:', this.show) 
            this.show.value = false
            document.removeEventListener('mousedown', this.closeMenu)
        }
    }
   // ...
}

使用这两种方法可以确保 closeMenu 方法中的 this 绑定到正确的对象上，并且能够正确修改 show 属性。