Vue.js 如何将表单数据从父组件传递到子组件？

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

我曾经尝试过使用v-model，因为从我所阅读和理解的内容来看，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>

//父组件
从“./components/fullName.vue”导入名称
导出默认值{
名称：“应用程序”，
数据（）{
返回{
fname:“”，
lname:“”，
提交的名称：“”，
SubmittedName:“”
}
},
组成部分：{
名称
},
方法：{
handleSubmit（）{
submittedFname=fname，
submittedLname=lname
}
}
}
//子组件
你的名字是：
{{submittedFname}}{{submittedFname}}
导出默认值{
姓名：'我的名字'，
数据（）{
返回{
}
},
道具：{
SubmittedName:String，
submittedLname:String
}
}

---

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

v-model表示，

fname

和

lname

实例数据属性在其各自的

输入

元素的值每次更改时都会更新（它在幕后使用

input

事件）。然后将

fname

和

lname

作为道具直接传递给子组件。这些道具是被动的，因此它的行为与您看到的一样，并且在您键入时更新名称

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

• 在父组件中再添加2个数据属性（例如SubmittedName和SubmittedName）
• 在表单上添加一个

  @submit

  事件侦听器，将值从

  fname

  和

  lname

  复制到

  submittedname

  和

  submittedlname

• 使用

  submittedname

  和

  submittedlname

  作为子组件的道具

工作代码：

//父组件
Vue.component（'应用程序'{
模板：`
`,
数据（）{
返回{
fname:“”，
lname:“”，
提交的名称：“”，
SubmittedName:“”
}
},
方法：{
handleSubmit（）{
this.submittedFname=this.fname；
this.submittedLname=this.lname；
}
}
});
//子组件
Vue.组件（'name-comp'{
模板：`
你的名字是：
{{submittedFname}}{{submittedFname}}
`,
道具：{
SubmittedName:String，
submittedLname:String
}
});
var vapp=新Vue({
el:“#应用程序”，
})；

//父组件
提交
从“./components/fullName.vue”导入名称
导出默认值{
名称：“应用程序”，
数据（）{
返回{
fname:“”，
lname:“”，
提交的名称：“”，
SubmittedName:“”
}
},
组成部分：{
名称
},
方法：{
handleSubmit（fname，lname）{
this.submittedFname=fname，
this.submittedLname=lname
}
}
}
//子组件
你的名字是：
{{submittedFname}}{{submittedFname}}
导出默认值{
姓名：'我的名字'，
数据（）{
返回{
}
},
道具：{
SubmittedName:String，
submittedLname:String
}
}

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

子组件

---

我编辑了上面的代码以显示我所做的事情，但现在如果我按下按钮或不按下按钮，它根本不会显示任何内容，我不确定我遗漏了什么或我是否做错了什么。尝试之后，我在子组件上仍然没有得到任何输出，但在控制台中查看时，它会显示：v-on处理程序中的错误：“引用错误：未定义SubmittedName”

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