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

【问题标题】：Is it possible to sync a child component with another in VueJS?是否可以在 VueJS 中将子组件与另一个子组件同步？
【发布时间】：2017-12-11 07:56:57
【问题描述】：

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

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

谢谢，杰米

【问题讨论】：

完全可以做到，能否提供一个 JSFiddle 供我们使用？基本上，您的Messages view 组件将有一个简单的道具并将其显示出来，而您的Chat Recipient List 将在修改时发送一个事件，因此父组件将能够更新该值。
只有图像对我们没有意义。始终在问题本身中提供代码/code-sn-p
我已经用 JSFiddle 编辑了我的帖子，尽管遇到了问题。我从来没有在 VueJS 中使用过 JSFiddle

标签： javascript vuejs2

【解决方案1】：

看起来您正在使用 vue 1。在 props 上使用 .sync 修饰符进行两种数据绑定会导致可维护问题并打破 one-way data flow 的规则。更新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进行状态管理

【讨论】：

谢谢，这正是我所需要的。我的项目其实用的是Vue 2，我只是冲着自己创建的JSFiddle。
虽然我似乎无法从方法内部发出，但有什么想法吗？我收到 Uncaught TypeError: _this.$emit is not a function 错误
@JamieBonnett 你能告诉你方法和调用它的位置吗？
对不起，这是我的错误，我可能弄错了我的 Babel 函数。奇怪的是，该函数正在执行我设置的一些功能。

【解决方案2】：

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

【讨论】：

我目前还不打算实现商店功能。出于各种原因。
您是否将“store”与“redux store”混淆了？实现一个 redux 商店以棘手而闻名，并且可以推迟。将 vue 与商店一起使用比其他方法要容易得多。试图在 vue 组件中保存你的状态，并用道具和事件传递它，很快就会变得一团糟。这就像试图让一个木偶在没有弦的情况下工作。