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>

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

Answer 1

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

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

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

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

Answer 2

您可以使用.sync Modifier

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

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_one: 'Hello from ComponentTwo',
        input_two: ''
      },
      watch: {
        input_two : function(val){
          this.$emit('update:secondValue', val)
        }
      }
    }
  }
</script>

组件two.vue：

const equipSchema = new mongoose.Schema({

dateConducted: {
    type: Date,
    default: Date.now
},
calibrateDue: {
    type: Date,
    default: () => Date.now() + 365 days || 1 year  // add 1 year from now 
}
});

module.exports = restful.model('Equipment', equipSchema);

Answer 3

您需要实现一个将v模型发送回父模式的系统。

这可以通过使用component-two内的计算属性来完成，该属性在其set方法中发出更改。

示例：

Vue.component('component-two', {
  name: 'component-two',
  template: '#component-two-template',
  props: {
    value: {
      required: true,
      type: String,
    },
  },
  computed: {
    message: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
});

var app = new Vue({
  el: '#app',
  data: {
    message1: 'm1',
    message2: 'm2',
  },
});

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<script type="text/x-template" id="component-two-template">
  <input type="text" v-model="message"/>
</script>
<div id="app">
  <input type="text" v-model="message1"/>
  <component-two v-model="message2"></component-two>
  <p>Output</p>
  <pre>{{message1}}</pre>
  <pre>{{message2}}</pre>
</div>

Answer 4

有几种方法可以做到，其他答案中也提到了一些方法：
（（无特定顺序，请阅读下面的详细信息以获取更多信息）

请记住，对于双向绑定，它可能导致一系列难以维持的突变，引用自文档：

不幸的是，真正的双向绑定会造成维护问题，因为子组件可以使父项发生变异，而在父项和子项中均不明显该变异的来源。

以下是可用方法的一些详细信息：

1。）使用全局事件总线

如在here

这样的许多地方所讨论的，我会强烈建议使用这种方法进行组件之间的任何类型的通用通信。

2。）在组件上使用道具

道具易于使用，是解决大多数常见问题的理想方法。
由于how Vue observes changes，所有属性都必须在对象上可用，否则它们将不起作用。如果在Vue完成后添加了任何属性，则必须使用'set'。

 //Normal usage
 Vue.set(aVariable, 'aNewProp', 42);
 //This is how to use it in Nuxt
 this.$set(this.historyEntry, 'date', new Date());

对象将对组件和父对象都是反应性的

我将对象/数组作为道具传递，它是双向自动同步的-在子级，在父级中已更改。

如果您传递简单值（字符串，数字）通过道具，您必须显式使用.sync modifier

引自-> https://stackoverflow.com/a/35723888/1087372

3。）使用v-model属性

v-model属性是语法糖，它使父子之间的双向绑定变得容易。它与sync修饰符的作用相同，只是它对绑定使用特定的道具和特定的事件

此：

 <input v-model="searchText">

与此相同：

 <input
   v-bind:value="searchText"
   v-on:input="searchText = $event.target.value"
 >

道具必须为 value 且事件必须为 input

4。）使用同步修饰符

sync修饰符也是语法糖，并且与v-model相同，只是prop和event名称由正在使用的任何东西来设置。

在父级中可以按如下方式使用：

 <text-document v-bind:title.sync="doc.title"></text-document>

可以从子级发出事件，以将任何更改通知父级：

 this.$emit('update:title', newTitle)

5。）使用Vuex

Vuex是一个可以从每个组件访问的数据存储。可以订阅更改。

通过使用Vuex存储，可以更轻松地查看数据突变的流，并明确定义了它们。通过使用vue developer tools，可以轻松调试和回滚所做的更改。

这种方法需要更多样板，但是如果在整个项目中使用，它将成为定义更改方式和更改位置的更简洁的方法。

请参见getting started guide

Answer 5

Vuejs使用＆＃34;道具＆＃34; 进行家长/儿童通讯和＆＃34;发出＆＃34;儿童/家长通信的事件

你必须记住，对于传递给子组件的每个道具，你应该有道具数组的道具。这同样适用于事件，您发出的每个事件都应该在父组件中捕获，因此：

<强>组件one.vue：

move_ip

<强>组件two.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>

这应该有效

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

5 个答案: