vue 设置全局变量了全局变量,要怎么在组件使用中修改它

vue js_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
你可能喜欢问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
写了个全局变量在a组件中获取到了,但是无法在a组件中修改它的值,尝试修改以后在b组件中调用依然是最初设置的值。很疑惑。求大家指导,拜托拜托,我是一颗小白菜
这个问题已被关闭,原因:问题已解决 - 问题已解决,且对他人无借鉴意义
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
经过反复实践,算是有点弄明白了这个问题。在main.js 中引入 config.js
import defines from './config'
Vue.prototype.defines = defines
config.js 的内容如下:
export default {
name: 'Who',
sex: 'Male',
setname (newName) {
this.name = newName
console.log('姓名已经改变')
然后在调用全局变量的vue的html中加入:
{{ this.defines.name }}
就可以显示全局变量了。
修改的方法为:在调用全局变量的vue的script中加入:
this.defines.setname('小强')
console.log(this.defines.name)
就能修改了。还有点问题,就是修改后的全局变量,如果被别的vue同时调用时,别的vue没有办法自动刷新新值。继续研究中,共勉。
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?使用vue框架有一段时间里,总结一下心得
使用vue框架有一段时间里,总结一下心得
环境搭建假设你已经通读vue官方文档(文档都没读一遍(至少),那不建议动手撸码),在大致了解vue是什么东西,有什么用,核心概念之后我们就可以开始着手学习vue。首先搭建环境。学习vue,我的建议是通过官手脚手架起步。&&&Installation$ npm install -g vue-cli&&Usage$ vue init &template-name& &project-name&&&&&Example:$ vue init webpack my-project根据需要安装插件yes or no,一直回车,脚手架就生成了。接下来剖析脚手架结构。脚手架结构剖析再开始写项目之前,我们需要弄清什么地方写什么代码。build文件夹webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less,你需要在webapck规则里使用less。src 文件夹撸码的地方~基本你所有的代码都在这一块完成。####### assets文件夹存放web中引用的图片 媒体资源。####### components文件夹主要存放可复用组件,你可以在任意页面中复用这些组件。####### router文件夹index.js 路由配置文件。在此处配置各个页面的跳转引用关系。####### APP.vue这里看一看做页面的根部。我们可以在这个页面进行一些css reset 操作。####### main.js根逻辑,页面加载首先会加载这份js文件。static文件夹主要存放外部引用资源。比如xxx.min.jsindex.htmlvue是spa应用,所以只有一个入口,也就是index文件,这里我们进行一些不可更改资源(比如某某库)的引用,和html页面meta 、title之类的设定。vue核心概念vue的核心概念是‘数据驱动’,假如我们需要切换view层,我们应该修改的是数据。下面我会分享一些我自己在学习vue中收获的一些实例,大家自行感受。实例展示的是方法论,概念性一样的东西,不要被例子局限,要将思维扩散出去。知识点学习还是看官方文档为主。vue如何处理dom显示,样式切换,动态样式实例watch 和 computed的 简析vue提供了2个动态监测data的函数,一个是watch,一个是computed。watch: 主要监测已经存在的data,处理data变化后的钩子computed: 处理一个已存在的data,返回一个datavuex 是一个比较好的例子,可以用来学习监测,什么时候用什么方法去处理这些变化。v-for 列表渲染机制v-for 是我认为vue中一个非常非常强大的指令,所有规律性动态数据的展示,都可以用for指令来完成。v-for是非常强大,可以追踪循环体内任意一个值的变化,针对变化来单独渲染。v-for 建议仔细阅读官方文档,而不是通读。在项目中,我们应该养成习惯。对于可变化的,规律性数据都采用for指令渲染。 我之所以又把for指令写了一遍,是因为我在开始写vue时,根本就没有活用for指令的简便和强大,还是古老的ul li 循环,繁杂的事件绑定委托。估计人类本性对一个东西还不太了解的时候会习惯性的用自己熟悉的方式去操作的原因。嵌套数据展示和灵活操作vue中引入组件以及父子组件的数据交互关于组件,任意vue文件你都可以看做一个组件。 在项目中我们一般使用的应该都是单文件组件,单文件组件与页面结构无异,是具有完整功能的一个模块。比如一个评论框,你就可以剥离成一个组件,在任意页面文件中引入这个组件。父组件(页面)子组件vue过滤器在有一些业务场景需要对数据进行一些转换,比如后端图片地址的前缀匹配,这个时候filters就派上大用场了。看个例子感受一下。过滤器的使用vue路由路由对于spa应用的重要性不言而喻,整个应用的页面关系都是通过路由定义的。我们先来看看一个路由文件大致是什么样子vue 使用history模式,我们就可以去使用history的API,需要在路由配置中启用。默认hash模式,history模式也是一般应用的常用模式。//切换当前地址,同 history.replaceStatethis.$router.replace({name: 'list'}) //向history推入一级,同history.pushthis.$router.push({name: 'list'}) //添加参数this.$router.push({name: 'list', query: {setting: 'setting'}})//监测路由变化watch:{ '$route': function () { //处理事件 } },》》》》可以在页面任意处打印this.$route查看路由对象vue的路由配置相对来说,是比较简单的,阅读一遍router文档,就可以快速上手。路由是非常重要的一块,在动手开始写你的vue项目之前,你非常有必要通读一遍路由文档。而不是碰到问题再去解决。嵌套路由,动态路由会对你的开发起到非常有用的帮助。官方路由可监测的全局变量——vuex项目开发中,往往我们会有一些全局变量,但是正常全局变量,vue是不能监测的,这个时候vuex就派上用场了。 vuex官方文档npm install vuex --save//安装好vuex后,我们先新建一个store文件夹,存放vuex相关文件,如下图所示&&&&& index.jsimport Vue from 'vue'import Vuex from 'vuex'import modulesApp from './modules/app' //引入一个app模块Vue.use(Vuex)let store = new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', modules: { app: modulesApp }})export default store———————————————— 分割线——————————————————&&&&&app.js //这里是个我的示例结构,可以查阅文档选择自己喜欢的书写方式let state = { height: document.documentElement.scrollHeight + 'px', total: 1, list: [],};let getters = {};let mutations = { height: state =& state.height = document.documentElement.scrollHeight + 'px', totalChange (state, total) { state.total = total }, listChange (state, list) { state.list = list },};let actions = {};export default { state, getters, mutations, actions}vuex如何开始写第一个demo项目看完以上内容,想必大家对vue都有了进一步的了解。在通读官方文档后,我们对vue都有一个大致的了解,这样其实对于新手而言还是没有方向去写一个demo出来的,我们往往想写个漂亮的demo,但这样就必须花大量时间去写html和css,这点博主深有体会,看了2遍文档后还是不知道怎么去入手写个demo练手。这里博主有个建议就是:专注于vue本身,而不是花过多的时间去写html,css。以上我们已经搭建了一个vue开发环境,接下来就是找一款心仪的UI组件库,博主这里推荐iview,个人感觉非常漂亮。然后就是构思你的demo要写什么,好了,拖组件搭UI,开始写真正写项目代码把,把更多时间花在vue学习之上。
本文仅代表作者观点,不代表百度立场。系作者授权百家号发表,未经许可不得转载。
百家号 最近更新:
简介: 忆,美人如玉。惜,玉殒香消。
作者最新文章vue2.0 全局变量怎么设置_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
vue2.0 全局变量怎么设置
我有更好的答案
xiaoxiao'//在.vue中使用则直接this.name就可以访问到多的情况//新建文件, sex.js(路口文件同级)export&;Object.prototype,变量多的话则可以建一个文件export default出一个变量组成的对象;})//同样在.keys(defines).}//在入口文件中引入上面的文件并将变量挂到全局import&nbsp../defines&#39.name&nbsp,设置之后就可以使用this.prototype[key]&nbsp..;defines&from&&#39.访问到了。另外如果要设置的变量少可以直接使用;=&defines[key];default&defines&nbsp:'xiaoxiao&#39。少的情况V=&{ =&&#39.forEach((key)=&gt:'woman', ;{ Vue在入口文件中使用Vue
采纳率:37%
为您推荐:
其他类似问题
换一换
回答问题,赢新手礼包}

我要回帖

更多关于 vue.js设置全局变量 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信