Question

如果这样做，我知道访问和设置Vue实例属性非常简单：

from scipy.stats import poisson
import matplotlib.pyplot as plt

x=range(1,21)
rv=poisson(5)
figure(1)

subplot(2,2,1)
plt.bar(x,rv.pmf(x))
plt.title('Poisson R.V for x=[1,21] and lambda=5')
plt.xlabel('Random Variable')
plt.ylabel('Probability')


x= range(1,21)
rv= poisson(10)
subplot(2,2,2)
plt.bar(x,rv.pmf(x))
plt.title('Poisson R.V for x=[1,21] and lambda=10')
plt.xlabel('Random Variable')
plt.ylabel('Probability')


x= range(1,21)
rv= poisson(15)
subplot(2,2,3)
plt.bar(x,rv.pmf(x))
plt.title('Poisson R.V for x=[1,21] and lambda=15')
plt.xlabel('Random Variable')
plt.ylabel('Probability')

x= range(1,21)
rv= poisson(20)
subplot(2,2,4)
plt.bar(x,rv.pmf(x))
plt.title('Poisson R.V for x=[1,21] and lambda=20')
plt.xlabel('Random Variable')
plt.ylabel('Probability')


plt.show()

然后我们可以做类似var vm1 = new Vue({ el: '#vm1', data: { name: 'Vue Instance #1' } });

的操作

（示例取自https://codingexplained.com/coding/front-end/vue-js/accessing-vue-instance-outside-declaration）

但是如果我们以更常规的方式进行操作呢？

vm1.whatever = 1

如何在外部设置一些数据？我发现非常难看：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#rank_app')

然后我可以通过以下方式从外部设置数据： import Vue from 'vue' import App from './App.vue' window.rankVue = new Vue({ render: h => h(App) }).$mount('#rank_app')

我想知道是否有较丑陋的解决方案。（我知道这是一个不好的做法，但是请相信我，没有其他方法-我在Django中，并且我不提供要提交的模板+表单，因此我需要更改window.rankVue.$children[0].error= true;变量提交表单时呈现vue实例等。

Answer 1

在此示例中：

您需要定义一个或多个方法来更新组件的内部状态。

使用引用，您可以指定要更新的子组件（它将替换$ children）。

Vue.component('board',{
    render: function (createElement) {
      return createElement('div',
       this.text
      )
    },
    data(){
      return {
          text: 'Vue Instance #1'
      }
    }
});

var myInstance = new Vue({
  el: '#rank_app',
  template: "<div> <h1>Example</h1> <br/> <board ref='message'/></div>",
  methods: {
    setError(errorMessage) {
      this.$refs['message'].text = errorMessage
    }
  }
});

function changeValue() {
  myInstance.setError("From outside")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="rank_app"></div>

<button onclick="changeValue()"> Change value </button>

您可以使用Vuex进行改进。状态由Vuex管理，您无需领导组件结构。

从外部访问vue组件

1 个答案: