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

Question

搞了一晚上，才发现是这个原因，我在局部组件需要一堆来自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

Answer 1

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

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

2. 再来说 this.activities 和 activities 的区别。

   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 来搞。

Answer 2

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

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

Answer 3

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

Answer 4

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