Vue Component 通过另一个相同的 Component 控制 Component 实例变量

Question

所以这里我有一个情况，实际上我正在菜单项上创建一个弹出窗口。 popup 是一个组件。所以我想要实现的是在调用组件本身的另一个实例时将变量 isOpen 更改为 false。比方说

如果单击菜单项 1，弹出组件将打开 (isOpen = true) 如果单击菜单项 2 弹出组件打开 ( isOpen = true )

所以这次有两个相同的组件在这里打开，如果第一个被点击，第二个组件应该会自动关闭。但我不知道如何更改 popup.vue(component) 变量 isOpen 是单击第二个弹出组件。

问题附在Sanbox Demo中看看。 Sandbox Link

Answer 1

主要问题是您的状态存储在弹出窗口中，而不是保存弹出窗口的组件中

例如：

<popup v-model='pop1' />
<popup v-model='pop2' />

watch(pop1, value => {
 if (value) pop2 = false
})

话虽如此，您可以通过让弹出窗口发出打开事件来解决此问题。当父级收到此消息时，它可以关闭其他弹出窗口。

<popup ref='pop1' @open='$refs.pop2.close()' />
<popup ref='pop2' />

菜单很多，最好有一个currentMenu属性自己设置。当新菜单打开时，您更新当前成员。

<popup ref='pop1' :value='current==="p1"' @open='current="p1"' />
<popup ref='pop2' :value='current==="p2"' @open='current="p2"' />

Vue Component control Component instance variable by another same Component