对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您!
懒癌患者直接复制粘贴即可
Modal.vue组件
{{statusText}} {{contentText}} {{item.payMoney}} {{item.yuan}}
- 确定
取消{{sure}}
新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用
import Modalfrom "./Modal.vue"; const compOnents= { install: function (Vue) { Vue.component('Modal', Modal); } } //导出组件 export default components;
Index.vue中调用
效果如图
模态框-1.gif
如果只需要一个确定按钮,只需要在调用的时候,这么写就好了
如图
模态框-2.gif
可能并不是特别完美,如果您发现有缺点,还请不吝赐教!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。