Question

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

我有此代码

模板

<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之外，我找不到其他解决方案，我可以从method x调用mounted()并将混合器传递给它，然后在我的getCatval()中使用它< / p>

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

Answer 1

我首先建议您停止使用var，并使用最新的let和const声明变量

您必须首先在

中声明一个变量

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

，然后在您的mount（）

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

     this.mixer
    }
  }

Answer 2

就像第九个秋天所说的那样：data函数和组件的props返回的对象被定义为组件的属性，就像您在{{ 1}}组件的属性，它位于method中，因此您可以在组件的任何地方使用它！

这里有个例子：

this

Answer 3

更新

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

正如我所看到的，var mixer = mixitup(allcards);最终充当function，它对传递给它的allcards进行了一些操作，然后返回一个值。

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

在您的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- 如果您的mixins依赖于您的mixitup，并且可以访问vue属性，请用作vue

在您的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)
        }
    }
  }

VueJS如何在方法中访问Mounted（）变量

3 个答案: