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

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

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

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

demo

Answer 2

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

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

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

Vue.js在多个组件之间移动数据

2 个答案: