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

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

//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>

如果我忘记了一些东西，这里是截图： 父组件

子组件

Answer 2

v-model 意味着fname 和lname 实例数据属性在其各自的input 元素的值每次更改时都会更新（它在幕后使用input 事件）。然后将fname 和lname 作为道具直接传递给子组件。这些道具是反应式的，因此它的行为如您所见，并且名称会在您键入时更新。

要仅在按下提交时更改名称，您可以这样做：

• 在父组件中再添加 2 个数据属性（例如，submittedfname 和 submitlname）
• 在表单上添加一个@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.lname那样使用this。