VueJS 如何在方法中访问 Mounted() 变量

Question

我是 Vue 新手，希望获得有关如何在我的方法中访问和使用在 Mounted() 中创建的变量的帮助。

我有这个代码

模板

<select class="controls" @change="getCatval()">

脚本

mounted() {
    var allcards = this.$refs.allcards;
    var mixer = mixitup(allcards);
  },
methods: {
    getCatval() {
      var category = event.target.value;
      // I want to access mixer here;
    }
  }

除了这个example 之外，我在任何地方都找不到解决方案，我可以从mounted() 调用method x 并将混音器传递给它，然后在我的getCatval() 中使用它

有没有更简单的方法来访问这些变量？

Answer 1

我会首先建议你停止使用var，并使用latest、let和const来声明变量

你必须先在

中声明一个变量

data(){
 return {
   allcards: "",
   mixer: ""
 }
}

然后在你的mounted()中

mounted() {
     this.allcards = this.$refs.allcards;
    this.mixer = mixitup(this.allcards);
  },
methods: {
    getCatval() {
      let category = event.target.value;

     this.mixer
    }
  }

Answer 2

如九秋所说：你的组件的data函数和props返回的对象被定义为组件的属性，就像你在method属性中定义的方法一样组件，它位于this，因此您可以在组件中的任何地方使用它！

这里是一个例子：

  data() {
    return {
      yourVar: 'hello',
    };
  },
  mounted() { this.sayHello(); },
  method: {
    sayHello() { console.log(this.yourVar); },
  },

Answer 3

更新

如果它在块范围内，则不能将任何值传递给外部 - 您需要从公共位置获取它或设置任何公共值

---

如我所见，var mixer = mixitup(allcards); 最终充当function，它通过传递给它的allcards 执行一些操作，然后返回一个值。

1 - 如果 mixitup 完全独立并且不使用组件使用的任何 vue 道具，则将其放置到不同的 helper 文件中

在你的helper.js

const mixitup = cards => {
  // Do some operation with cards
  let modifiedCards = 'Hey I get returned by your function'
  return modifiedCards
}

export default {
    mixitup
}

然后在您的vue 文件中只需import 并将其用作method。

在yourVue.vue

import Helpers from '...path../helpers'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    data: ...,
    computed: ...,
    mounted() {
      const mixer = mixitup(allcards)
    },
    methods: {
       mixitup, // this will make it as `vue` method and accessible through 
         this
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }

2- 如果您的 mixitup 依赖于您的 vue 并且可以访问 vue 属性，则将其用作 mixins

在你的yourVueMixins.js:

export default {
    methods: {
         mixitup(cards) {
          // Do some operation with cards
          let modifiedCards = 'Hey I get returned by your function'
          return modifiedCards
        }
    }
}

还有import 在你的vue 文件中：

 import YourVueMixins from '...mixins../YourVueMixins'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    mixins: [YourVueMixins] // this will have that function as vue property
    data: ...,
    computed: ...,
    mounted() {
      const mixer = this.mixitup(allcards)
    },
    methods: {
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }