Question

我正在使用VueJs2。组件A由两个组件B和C组成，还包含一个提交按钮。每个子组件都有一个输入元素。单击A的提交按钮时，我需要从B和C获取输入并将其提交为单个发布请求。

“组件A”

var A = {
    components: {
        'B',
        'C',
    },
    template: `<input type="button" value="submit" id="submit" v-on:click="submitMethod" />`,
    methods: {
        submitMethod: function() {

        }
    }
}

“组件B”

var B = {
    template: `<input type="text" id="fname" v-model="fname" />`,
    data: {
        fname: ''
    }
}

“组件C”

var C = {
    template: `<input type="text" id="lname" v-model="lname" />`,
    data: {
        lname: ''
    }
}

我怎么能实现这个目标？

Answer 1

我理解你的担忧。这些问题在Vue社区中得不到很好的解答。如果您来自React，当然有一些学习曲线，但您可以直接了解所有最佳实践。

在React中，在本例中为Vue，在我的组件A中，我将为B和C中的输入提供状态（数据）。然后在我的模板中，我会做这样的事情。

<div>
  <A :value="aValue" onChange="(value) => aValue = value"/>
  <B :value="bValue" onChange="(value) => bValue = value"/>
  <input type="button" value="submit" @click="myFucntion"/>
</div>

现在您拥有顶级（容器）组件中的所有数据。这将允许我们的大多数组件无状态和可重用。我知道这有点冗长，但我认为这是值得的。

Answer 2

您可以使用事件驱动方法。这将是从child to parent传递数据的更优雅方式。

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  data: function() {
    return {
      internalValue: ''
    }
  },
  watch: {
    'internalValue': function() {
      // When the internal value changes, we $emit an event. Because this event is 
      // named 'input', v-model will automatically update the parent value
      this.$emit('input', this.internalValue);
    }
  },
  created: function() {
    // We initially sync the internalValue with the value passed in by the parent
    this.internalValue = this.value;
  }
});

new Vue({
  el: '#app',
  data: {
    inputs: {    
      value1: 'hello1',
      value2: 'hello2'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <p>Parent value: {{inputs}}</p>
  <child v-model="inputs.value1"></child>
  <child v-model="inputs.value2"></child>
</div>

<template id="child">
   <input type="text" v-model="internalValue">
</template>

从这里引用：vuejs update parent data from child component 作者：

如何从Vuejs2中的多个子组件获取输入？

2 个答案: