开发者问题收集

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

2017-12-11
746
javascript vuejs2

我创建了一个视觉辅助工具来帮助解释我的想法（请忽略拼写错误）： 在此处输入图像描述

我的想法是，您可以从列表中选择一个收件人，并使用所选收件人的信息更新另一个组件。现在我尝试这样做，但一直遇到特定错误 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>

谢谢， Jamie

2个回答

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

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

这是使用 $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 用于状态管理

Vamsi Krishna
2017-12-11

您的商店在哪里？请不要在没有商店的情况下尝试执行此操作。每当您在组件之间共享状态时， 商店应该是您的中央存储库 。

bbsimonbb
2017-12-11