Vue.js上的模态窗口

时间:2019-10-21 16:15:48

标签: javascript vue.js

开始学习vue js。我无法创建模式窗口。我怎么了如何链接Header.vue组件中的按钮元素和Modal.vue中的模式窗口?

Sandbox

1 个答案:

答案 0 :(得分:0)

我已经编辑your code here,以使其正常运行。但是,您需要在模式本身中创建一个“关闭”按钮,以将isModalLoginVisible切换回false。您可以将相同的点击处理程序传递给Modal.vue,以使关闭按钮起作用。

两个组件都应在一个公共组件中调用,例如App.vue。在App.vue组件中创建一个单击处理程序,并将该处理程序作为道具传递给Header.vue组件。在Header.vue组件中,将点击处理程序传递给按钮@click属性。 App.vue组件中的单击处理程序将使用Modal.vue指令切换一个标志,该标志将决定v-if组件是否应可见。