Question

我想从组件中设置Vue实例的数据变量。这甚至是可能的。

Vue.component('graph', {
    template: '',
    props: {},
    data: function () {
    methods: {
        setBtn: function () {
           //here i want to set ShowBtn variable for example to false
        },
    },  this.getUserRecordStatistic();
});

new Vue({
    el: '#app',
    data: {
       showBtn: null
    },
    methods: {},
});

Answer 1

这应该可以解决问题：

Vue.component('graph', {
  template: '',
  props: {},
  data: {},
  methods: {
    setBtn: function () {
      app.showBtn = false;
    },
  },
});

var app = new Vue({
  el: '#app',
  data: {
    showBtn: null
  },
  methods: {},
});

Answer 2

您可以通过var response = new Mock<HttpResponseMessage>(); response.Setup(rm => rm.Content.ReadAsStringAsync()).Returns(Task.Delay(10).ContinueWith(t => "Hello"));访问根vue实例上的data。

vm.$root

Answer 3

作为最佳做法，您应该避免直接在其他组件上设置参数。 Vue旨在解耦其组件，因此直接编辑参数，尽管可能，但面对此。查看组件指南以获取更多信息，具体为：https://vuejs.org/v2/guide/components.html#Composing-Components

因此，不应直接编辑此参数，而应从组件中发出一个事件，您可以在根上调用该事件 - 或者设置graph组件的任何其他组件，即

图表组件会发出一个事件

Vue.component('graph', {
  methods: {
    activateBtn () {
      this.$emit('set-button', true)
    },
    ...

root 或在其模板中设置graph的任何组件

# template
<graph @set-button="setBtn"></graph>

# script
new Vue({
  el: '#app',
  data: {
    showBtn: false
  },
  methods: {
    setBtn (state) {
      this.showBtn = state
    },
  },
})

从实例中的组件设置变量

3 个答案: