Vue.js 如何将数据传递到vue js中的另一个组件

我创建了一个职业页面，当用户选择他们申请的职位的标题时，它将重定向到申请表中，并显示该职位的标题。如果他们有兴趣申请该职位，他们会输入一些信息，包括全名、联系人和简历。一旦他们提交了申请，它会将数据发送到服务器，包括他们已经申请的职位

Header.vue

<template>
  <div>
    <h1 class="title-wrapper">
      Application Form
    </h1>
    <p class="info-wrapper">
      You are applying as
      <nuxt-link to="/careers">
        <u>{{ title }}</u>
      </nuxt-link>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
};
</script>

申请表

你申请的职位是
{{title}}

导出默认值{
名称：'标题'，
道具：{
标题：{
类型：字符串，
默认值：“”
}
}
};

Form.vue

<form class="app-form" @submit.prevent="onSubmit">
  <InputField
    v-model="fullName"
    label="Full Name"
    firequired
    required
    placeholder="Your full name"
    @handleChange="handleChangeName($event)"
  />
  <button type="submit">Submit</button>
</form>

<script>
export default {
  name: 'Submit',
  template: '<nuxt-link to="/careers"><u>{{ title }}</u></nuxt-link>',
  methods: {
    onSubmit() {
      this.$axios.post('url', {
        position:this.title
      })
   }
};
</script>

提交

Application.vue（父级）

提交表单的验证在form.vue中，如何将标题从Header.vue发送到form.vue并发送到服务器。这就是我尝试过的

Form.vue

<form class="app-form" @submit.prevent="onSubmit">
  <InputField
    v-model="fullName"
    label="Full Name"
    firequired
    required
    placeholder="Your full name"
    @handleChange="handleChangeName($event)"
  />
  <button type="submit">Submit</button>
</form>

<script>
export default {
  name: 'Submit',
  template: '<nuxt-link to="/careers"><u>{{ title }}</u></nuxt-link>',
  methods: {
    onSubmit() {
      this.$axios.post('url', {
        position:this.title
      })
   }
};
</script>

导出默认值{
名称：“提交”，
模板：“{{title}}”，
方法：{
onSubmit（）{
此.$axios.post（'url'{
职位：这个职位
})
}
};

---

并且它不返回任何内容

您可以使用

存储

在组件之间共享道具。您可以按照doc了解如何与同级组件相互通信。如果您

应用程序.vue

能够将标题道具传递到标题，为什么不将标题道具传递给表单呢？我已经回答了一个类似的问题，希望t他的帮助你-