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

Question

我创建了一个视觉辅助工具来帮助解释我的想法(请忽略拼写错误):

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

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

更新:

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'
});

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

谢谢，杰米

Answer 1

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

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

这是您使用 $emit 发出自定义事件以修改 prop 的代码(使用 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用于状态管理