vue局部组件如何获得js全局变量的值

linp
  • 9

搞了一晚上,才发现是这个原因,我在局部组件需要一堆来自ajax获得的数据,也就是外部的全局变量,由于vue不熟悉,我搞了很久,重点代码:

var outdoor = {
        template: outdoor_template,
        data() {
            alert(this.activities)
            return {
                activity: this.activities,
                findImg: $('.act-item-text').find('.image-wrapper>img').length > 0,
                findImgSrc: $('.act-item-text').find('.image-wrapper>img').attr('src')
            }
        },
        mounted() {
            $('.act-item-text').find('.image-wrapper>img').hide()
        },
    };

这是局部组件,中间alert会弹出undefined,而如果去掉this直接变为null,不过两者都是数据变空的问题,所以我该如何获得外部的数据,我试了一下,好像在全局组件也不能拿到js全局变量,就差这个了,差点就重构代码了。。。求解!



其实我辗转了这么久,就是想在上面的outdoor_template里得到全局组件的数据,他数据是ajax获得的,那应该怎么搞?props的话看了官方教程和参考网上其他文章,好像都是new Vue('child',...)这样的,这样不就一定要手写一个<child></child>出来了不是吗?我在outdoor_template里写了v-for渲染,需要获得页面刚加载获得的数据(list)不要笑话我了哭QAQ
回复
阅读 2.5k
4 个回答

同意 @vimac 的说法:你需要系统学习一下 vue

  1. 先来说 data 方法,他会在使用的时候,构建初始的状态。
    可以看生命周期相关的
  2. 再来说 this.activitiesactivities 的区别。

    1. this 是指调用的对象,这里如果是 Vue 初始化的时候,应该是 Vue 实例。那如果 outdoor.data() 这样调用就是 outdoor 对象。
    2. 单纯的 activities 就是在执行环境的上下文开始找了,基于你提供的代码肯定是 global 了,算是等价于 window.activities
      为什么说算是呢?因为如果你全局没有的话 activities 会报错,window.activities 不报错。
  3. 最后说说 Vue 一般应该怎么做。

    1. vue-route 路由里面,可以通过 query、params、meta 等方式给组件传入参数
    2. vuex 统一的全局状态管理,直接拿就好了。
    3. 普通的组件调用。通过 props 和 $emit 来搞。

跑偏+1,
Vue不是数据驱动的吗?为什么要通过校验元素数量来控制显示?
你直接 props 一个元素展示状态和图片地址就好了
这个只涉及父子组件的传值

Vuex 不推荐使用,除非你准备存一些 全局的token 或者当前页面的检索条件什么的

  1. this.activities 你这个this指向的是vue组件,不是全局变量,所以即便此时全局变量是有值的也取不到。
  2. 和楼上类似,我也建议使用props来进行组件的传值操作,如果迫于无赖,必须取ajax调用的值,也可以在data中定义默认值,在create中调用相应设值方法设置对应值。

思路清奇啊,vue+jquery 竟然看着还挺有意思哈哈,建议过一般vue的官网基础教程吧,vue这么用就脱离他的数据驱动意义了

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