Vuejs 在多个组件之间移动数据答案

【问题标题】：Vuejs moving data between multiple componentsVuejs 在多个组件之间移动数据
【发布时间】：2018-10-08 22:25:50
【问题描述】：

我有一个父组件和两个子组件，我需要在它们之间移动数据。我可以从一个子组件（multiselect.vue）获取发送到父组件的数据，但不能让它移动到另一个子组件（render.vue）。我怀疑它与v-model有关。以下是简化版。

父组件

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

如何让发出的数据被“渲染”组件“观看”和“拾取”？

【问题讨论】：

multiselect.vue 是否在修改数据？您需要将修改后的数据传递给render.vue吗？
你确定手表被调用了吗？你记录了值吗？如果两者的响应都是 YES，那么您会遇到问题，即 vue 数据对象没有深度反应。所以你不应该改变这样的对象的引用。
感谢您的帮助。我认为这是因为 vuejs 对象没有深度反应是我的问题。我要重新处理它，看看我是否可以这样解决。

标签： javascript vue.js vuejs2

【解决方案1】：

render 是一个保留名称（即内部的render function 不能被覆盖），出于某种原因，Vue 会默默地忽略修改它的尝试。

重命名您的属性（例如，改为“myRender”），您应该会看到反应性。如果myRender 始终等于content，您实际上可以在绑定中将其替换为content：

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

demo

【讨论】：

感谢您的提示-我尝试将其简化以粘贴到此处（不知道保留了“渲染”）。在我的实际代码中，它的名称不同。不过，我以后会记住这一点。谢谢！

【解决方案2】：

我在这里使用了一个变体来解决我的问题：

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

取自这里： https://vuejs.org/v2/guide/reactivity.html

【讨论】：

你还在用watcher吗？我真的建议只使用您在选择的 v-model 中拥有的相同变量，并确保它是正确的反应性。 Watchers 仅存在于其他 Vue 功能无法涵盖的特定情况下，如果您还没有使用响应式变量，则应考虑使用。