Vuejs перемещение данных между несколькими компонентами

Question

У меня есть родительский компонент с двумя дочерними компонентами, между которыми мне нужны данные.Я могу получить испущенные данные от одного дочернего элемента (multiselect.vue) к родительскому элементу, но не могу их затем переместить в другой дочерний компонент (render.vue).Я подозреваю, что это как-то связано с v-моделью.Ниже приведена упрощенная версия.

Родительский компонент

<template>
  <div>
    <multiSelect v-model="content" />
    <renderSplashPage :content="render" />
  </div>
</template>

<script>
import multiSelect from '@/utils/multiSelect'
import render from '@/components/Render'

export default {
  components: {
    multiSelect,
    render,
  },
    name: 'somename',
  data(){
    return{
      content: {},
      render: {}
    }
  },
  watch: {
    'content': function(val) {
      this.render = val;
    },
  },
}
</script>

Как я могу получить данные наблюдения, которые будут «отслеживаться» и «приниматься» компонентом «рендеринга»?

Answer 1

Я использовал вариант этого здесь, чтобы решить мою проблему:

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

Взят отсюда: https://vuejs.org/v2/guide/reactivity.html

Answer 2

render является зарезервированным именем (т. Е. Внутренняя render функция не может быть перезаписана), и по какой-то причине Vue молча игнорирует попытки его изменить.

Переименуйте вашу собственность (например, в «myRender»), и вы должны увидеть реактивность.Если myRender всегда равно content, вы можете просто заменить его на content в привязке:

<multiselect v-model="content" :options="options" />
<render :content="content" />

demo