在Modal标签中通过内容上的slot属性来标识内容是标题还是显示内容,slot='tlt'中的文字将会作为弹窗标题显示,slot='text'的文字将会作为弹窗的正文显示;
在这里你也可以通过{{msg}}插值表达式的形式来把内容和父组件的数据绑定到一块;
在script中我们通过data中的两个变量showa和showb来标识弹框的打开和关闭;
页面中的按钮事件中通过设置showa和showb的值来打开和关闭弹窗。
vue弹窗组件结语
这样一个vue弹窗组件就算完成了,使用简单灵活,哪里需要引入到里面就可以使用了,而且其中的内容和标题可以自由设置,而且vue弹窗组件相对于js弹窗插件来说实现起来更简单,更清晰。只是我们需要很好的掌握vue提供的特性以及能够按照vue所在的思想框架进行思考。而vue开中的重要思想就是:我们操作数据,页面变化dom操作交给vue来处理。