Vue数据变量到方法然后提供答案

【问题标题】：Vue data variable to methods and then to provideVue数据变量到方法然后提供
【发布时间】：2020-11-03 04:08:36
【问题描述】：

我无法从方法中获取一些值并希望解析以提供。我该如何解决这个问题？

  methods: {
    onClickCategory: (value) => {
      return (this.catId = value);
    },
  },
  provide() {
    return {
      categoryId: this.value,
    };
  },

我总是得到 categoryId:undefined

【问题讨论】：

标签： javascript vue.js ecmascript-6 apollo

【解决方案1】：

作为Vue Guide highlights，

注意：提供和注入绑定不是反应式的。这是故意的。但是，如果您传递一个观察到的对象，属性在那个对象上确实保持反应。

因此，一种解决方案是将您的值包装到一个观察到的对象中，例如以下示例中的 test2.value：

Vue.config.productionTip = false
Vue.component('v-parent', {template: `
    <div>
      <h4>Example</h4>
      <p>Not Working: <input v-model="test1"></p>
      <p>Working: <input v-model="test2.value"></p>
      <v-child></v-child>
    </div>
`,
  data () {
    return {
      test1: 'blabla1',
      test2: {value: 'blabla2'}
    }
  },
  provide () {
    return {parent1: this.test1, parent2: this.test2}
  }
}),
Vue.component('v-child', {
  template: `<div><pre>{{parent1}}</pre><pre>{{parent2.value}}</pre></div>`,
  inject: ['parent1', 'parent2']
})
new Vue({
  el: '#app',
  data() {
    return {
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <v-parent/>
  </div>
</div>

【讨论】：

是的，如果我需要从数据中获取，但如果有人单击以将值传递给提供者，我需要从方法中获取。

【解决方案2】：

我找到了解决方案：

  methods: {
    onClickCategory(value) {
      this.categoryId.value = value;
    },
  },
  provide() {
    this.catID = this.categoryId;
    return {
      catId: this.catID,
    };
  },

【讨论】：