доступ к vue компоненту снаружи

Question

Я знаю, что это супер просто для доступа и установки Vue свойств экземпляра, если это сделано так:

var vm1 = new Vue({
    el: '#vm1',
    data: {
        name: 'Vue Instance #1'
    }
});

Тогда мы можем сделать что-то вроде vm1.whatever = 1

(пример взято отсюда: https://codingexplained.com/coding/front-end/vue-js/accessing-vue-instance-outside-declaration)

Но что, если мы сделаем это более обычным способом:

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')

и затем я могу установить данные извне: window.rankVue.$children[0].error= true;

Интересно, есть ли менее уродливые решения. (Я знаю, что это плохая практика, но, поверьте, другого пути нет - я нахожусь в Django, и шаблоны + форма для отправки предоставлены не мной, поэтому мне нужно изменить error переменную, используемую для визуализировать vue экземпляр, когда отправлена ​​форма et c.)

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, и вам не нужно руководить структурой компонентов.