vue可以绑定全局属性吗?

clipboard.png

一个toash组件,我设置的时间为1800毫秒,一个项目有N个页面用到toash。如果哪天产品叫我改为3000毫秒那我不得一个一个改,有好的解决方法吗?

<toast
    v-model="msg"
    type="text"
    :time="1800"
    position="top"
    text="删除成功">
</toast>
阅读 4.2k
5 个回答

最简单的方法你在组件内设置

props:{
    time: {
        type: Number,
        default: 1800
    }
}

最好设一个全局变量。则做一个

data.js
export const TOAST_TIME = 1800
import {TOAST_TIME} from '........./data'
props:{
    time: {
        type: Number,
        default: TOAST_TIME
    }
}

然后你在传入的时候 如果不是 1800 特殊的 改一下 就可以了

1、建立一个配置变量的js:

export const TIME = 1800

2、在需要的vue文件中 import进去这个文件变量

import {TIME} from './config.js'

main.js里面写上,window.TOAST_TIME = 1800
用的时候也直接用window.TOAST_TIME 就OK了
简单粗暴
嘿嘿

楼主还是不要被我带偏啦

优雅的实现肯定还是把toash打个包,做成vue的components,这样你只要在这个组件里面写一次就可以了,要用到的地方进行组件引入,还可以把一些参数做成props,每个调用组件的地方都可以做自定义,岂不美滋滋

<toast

v-model="msg"
type="text"
:time="time"
position="top"
text="删除成功">

</toast>

作为一个子组件 props接收父组件传递的time 父组件的时间可以引入全局的变量,全局变量可以定义在main.js里面window.TOAST_TIME = 1800

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题