是否可以在VueJS中将子组件与另一个组件同步？

Question

我已经创建了一个视觉辅助工具来帮助解释我的想法（请忽略拼写错误）：

我的想法是，您可以从列表中选择收件人，并使用所选收件人的信息更新另一个组件。现在我尝试了这个并且我一直遇到特定错误Uncaught TypeError: Right-hand side of 'instanceof' is not an object。

所以现在我认为这是不可能的？

更新

＆＃13;

＆＃13;

Vue.component('ChatRecipientList', {
  template: 'Set the recipient to "Jamie"',
  name: 'list-component',
  props: {
  	recipient: null
  },
  mounted() {
  	recipient = 'Jamie';
  }
})

Vue.component('MessagesView', {
  template: 'Showing messages for <span>{{ recipient }}</span>',
  name: 'show-messages-component',
  props: {
  	recipient: null
  }
})

Vue.component('ChatContainer', {
  template: '<h1>Chat</h1>' +
  	'<list-component :recipient.sync="this.recipient" />' +
    '<show-messages-component :recipient.sync="this.recipient" />',
  name: 'chat-container',
  data() {
		return { recipient: null }
  }
})

var app = new Vue({
  el: '#app'
});

＆＃13;

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <chat-container/>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢， 杰米

Answer 1

看起来你正在使用vue 1.在道具上使用.sync修饰符进行双向数据绑定会导致可维护的问题并破坏one-way data flow的tye规则。更新到vue2并使用事件修改父组件中的prop值。

您可以在vue 2.3 +中使用.sync修饰符，但它只是事件发出的custom event侦听器的语法糖。

以下是使用$emit发出自定义事件来修改道具的代码（使用了vue 2.0 +）

Vue.component('ChatRecipientList', {
  template: '<div>' + 'Set the recipient to "Jamie"' + '</div>',
  name: 'list-component',
  props: {
      recipient: null
  },
  mounted() {
    this.$emit('set-recipient', 'jamie');
  }
})

Vue.component('MessagesView', {
  template: '<div>' + 'Showing messages for {{ recipient }}' + '</div>',
  name: 'show-messages-component',
  props: 
      ['recipient']

})

Vue.component('ChatContainer', {
  template: '<div>' + 
  '<h1>Chat</h1>' +
      '<chat-recipient-list :recipient="recipient" @set-recipient="setRecipient" />' +
    '<messages-view :recipient="recipient" />' +
    '</div>',
  name: 'chat-container',
  data() {
        return { recipient: null }
  },
  methods:{
      setRecipient(event){
          this.recipient = event;
      }
  }
})

var app = new Vue({
  el: '#app'
});

这是工作fiddle。

如果您想在不同组件之间共享状态，在不同组件中进行变更，您可以尝试vuex进行状态管理

Answer 2

你的商店在哪里？没有商店，请不要尝试这样做。每当组件之间共享状态时，the store should be your central repository。