从另一个组件中的一个 Vue 单个组件获取数据？

Question

我使用 Vue.js 2.5.13 并具有以下结构：

组件-one.vue ：

     <template>
      <div>
        <input type="text" v-model="input_one">
        <component-two></component-two>
      </div>
    </template>

    <script>
      import ComponentTwo from 'component-two.vue'

      export default {
        name: "component-one",
        components: {
          ComponentTwo
        },
        data() {
          return {
            input_one: 'Hello from ComponentOne',
            input_two: ... // <-- I want to get value from ComponentTwo input_two (v-model) here
          }
        }
      }
    </script>

组件-two.vue ：

     <template>
      <div>
        <input type="text" v-model="input_two">
      </div>
    </template>

    <script>
      export default {
        name: "component-two",
        data() {
          return {
            input_one: 'Hello from ComponentTwo'
          }
        }
      }
    </script>

如何从组件 ComponentOne ComponentTwo 中的 --- 获取数据？这对我来说很重要，因为我有许多类似的带有字段的组件（巨大的注册站点表单）并且不知道在 Vue 组件之间调用数据。

原文由 koddr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用全局事件总线轻松实现此目的。

https://alligator.io/vuejs/global-event-bus/

对于更大、更复杂的应用程序，我建议使用状态管理工具，例如 vuex。

https://vuex.vuejs.org/en/

原文由 user320487 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Vuejs 使用 “props” 进行父/子通信，“emit” 事件 用于子/父通信

您必须记住，对于传递给子组件的每个道具，您都应该将该道具添加到道具数组中。这同样适用于事件：您发出的每个事件都应该在父组件中捕获，如下所示：

组件one.vue：

     <template>
      <div>
        <input type="text" v-model="input_one">
        <component-two
            @CustomEventInputChanged="doSomenthing">
        </component-two>
      </div>
    </template>

    <script>
      import ComponentTwo from 'component-two.vue'

      export default {
        name: "component-one",
        components: {
          ComponentTwo
        },
        data() {
          return {
            input_one: 'Hello from ComponentOne',
            input_two: ''
          }
        },
        methods: {
            doSomenthing ( data ) {
                this.input_two = data;
            }
        }
      }
    </script>

组件-two.vue：

     <template>
      <div>
        <input type="text" v-model="input_two" @change="emitEventChanged>
      </div>
    </template>

    <script>
      export default {
        name: "component-two",
        data() {
          return {
            input_one: 'Hello from ComponentTwo'
          }
        },
        methods: {
            emitEventChanged () {
                this.$emit('CustomEventInputChanged', this.input_two);
            }
        }

      }
    </script>

这应该工作

原文由 Luca Giardina 发布，翻译遵循 CC BY-SA 4.0 许可协议