Как обновить компонент Vue подпирает объект извне?

Question

Мне нужно обновить props объект компонента Vue извне Vue. У меня есть решение, которое, кажется, работает, но я получаю предупреждение, от которого хочу избавиться.

Я создаю композицию Vue следующим образом:

    this.vm = return new Vue({
      render: h => h(component, {
        props: propsData,
      })
    }).$mount(el);

Затем в функции я обновляю реквизит извне Vue следующим образом

    this.updateProps = function (props) {
       const children = this.vm.$children;
       const firstChild = children && children[0];
       if (!firstChild) {
         return;
       }
       _.each(_.keys(firstChild.$props || {}), (key, i) => {
         firstChild.$props[key] = props[key];
       });
    }

Это работает, но я получаю это предупреждение:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "xxxx"

Как это должно быть сделано правильно, без предупреждения?

Answer 1

Вы не можете. Как и в этом предупреждении, создайте свои собственные данные в компоненте и используйте реквизиты в качестве начального значения или используйте свойство computed. Например:

props: ['initialCounter'],

data: () => ({
  counter: this.initialCounter
})

Или:

props: ['size'],

computed: {
  normalizedSize () {
    return this.size.trim().toLowerCase()
  }
}