来自其他Vue组件的价值

Question

如何获取另一个Vue组件中元素的值并在另一个Component中使用它。例如，我想从单独的组件中获取文本框的值，然后将其用于另一个组件。

Answer 1

通过使用事件总线在任何组件之间进行通信，

组件A：

<script>
export default {
  name: 'ComponentA',
  methods: {
    onTextAreaChange: function(event) {
      this.$root.$emit('changed', event)
    }
  }
}
</script>

组件B：

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('changed', (data) => {
      //...console data here
    })
  }
}
</script>