如何将表单数据从父组件传递给子组件？

Question

我正在尝试学习一些vuejs，并努力了解如何将数据从父组件传递到其子组件。我知道还需要更多，但我不确定该走哪条路。按下提交按钮以在子组件中显示时，如何在父组件的输入字段中传递名称？

我尝试使用v-model，因为从我的阅读和理解中，它应该可以满足我的要求，但是它甚至不需要按按钮就可以更新它。

//Parent component
<template>
  <div id="app">
    <form @submit.prevent="handleSubmit">
        <input type="text" name="fname" id="fname" placeholder="First Name" v-model="fname">
        <input type="text" name="lname" id="lname" placeholder="Last Name" v-model="lname">
        <input type="submit" value="Submit Name">
    </form>
    <Name lname="lname" fname="fname"></Name>
  </div>
</template>
<script>
    import Name from './components/fullName.vue'
    export default {
        name: 'app',
        data () {
            return {
                fname: '',
                lname: '',
                submittedFname: '',
                submittedLname: ''
            }
        },
        components: {
            Name
        },
        methods: {
            handleSubmit() {
                submittedFname = fname,
                submittedLname = lname
            }
        }
    }
</script>
//child component
<template>
    <div id="my-name">
        <label>Your name is:</label>
        {{ submittedFname }} {{ submittedLname }}
    </div>
</template>
<script>
    export default {
        name: 'my-name',
        data () {
            return {
            }
        },
        props: {
            submittedFname: String,
            submittedLname: String
        }
    }
</script>

我希望在按下按钮时在子组件上显示全名，但是在我键入它时会显示它。

Answer 1

v-model意味着fname和lname实例数据属性每次在其各自的input元素的值更改时都会更新（它使用后面的input事件场景）。然后，您将fname和lname直接作为道具传递给子组件。这些道具具有反应性，因此可以像您看到的那样运行，并且在键入时会更新名称。

要仅在按下提交时更改名称，可以执行以下操作：

• 在父组件中再添加2个数据属性（例如Submittedfname和Submittedlname）
• 在表单上添加一个@submit事件监听器，将值从fname和lname复制到submittedfname和submittedlname
• 使用submittedfname和submittedlname作为子组件的道具。

工作代码：

//Parent component
Vue.component('app', {
  template: `
  <div>
    <form @submit.prevent="handleSubmit">
        <input type="text" name="fname" id="fname" placeholder="First Name" v-model="fname">
        <input type="text" name="lname" id="lname" placeholder="Last Name" v-model="lname">
        <input type="submit" value="Submit Name">
    </form>
    <name-comp :submittedFname="submittedFname" :submittedLname="submittedLname"></Name>
  </div>`,
  
  data () {
    return {
      fname: '',
      lname: '',
      submittedFname: '',
      submittedLname: ''
    }
  },
  methods: {
    handleSubmit() {
      this.submittedFname = this.fname;
      this.submittedLname = this.lname;
    }
  }
});


//child component
Vue.component('name-comp', {
  template: `
  <div>
    <label>Your name is:</label>
    {{ submittedFname }} {{ submittedLname }}
  </div>`,
  
  props: {
    submittedFname: String,
    submittedLname: String
  }
});

var vapp = new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <app />
</div>

在提供给Name组件的道具前，您缺少“：”。另外，您没有像this中那样使用this.lname。

Answer 2

//Parent component
<template>
  <div id="app">
    <form>
        <input type="text" name="fname" id="fname" placeholder="First Name" v-model="fname">
        <input type="text" name="lname" id="lname" placeholder="Last Name" v-model="lname">
    </form>
    <button @click="handleSubmit(fname,lname)">submit</button>
    <Name :submittedFname="submittedFname" :submittedLname="submittedLname" ></Name>
  </div>
</template>
<script>
    import Name from './components/fullName.vue'
    export default {
        name: 'app',
        data () {
            return {
                fname: '',
                lname: '',
                submittedFname: '',
                submittedLname: ''
            }
        },
        components: {
            Name
        },
        methods: {
            handleSubmit(fname,lname) {
                this.submittedFname = fname,
                this.submittedLname = lname
            }
        }
    }
</script>

//child component
<template>
    <div id="my-name">
        <label>Your name is:</label>
        {{ submittedFname }} {{ submittedLname }}
    </div>
</template>
<script>
    export default {
        name: 'my-name',
        data () {
            return {
            }
        },
        props: {
            submittedFname: String,
            submittedLname: String
        }
    }
</script>

以防万一我忘记了一些屏幕截图： 父组件

子组件