typescript - 使用 Vue.js 将文本数据从一个组件传递到另一个组件

Question

我在将文本数据从自定义组件传递到主组件时遇到问题。这个自定义组件是文本区域，我想将文本存储到我的数据库中。我尝试使用 Prop 注释，但没有用。当我 console.log(this.text) 我没有看到任何文本数据。我可能做错了，所以如果有人可以帮助我，那就太棒了！

我的主要组件

<template>
  <div>
   <textarea-component></textarea-component>
   <button @click="save()"></button>
  <div>
</template>
<script lang=ts>
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import api from '@/infrastructure/api/noteApi';
  @Component({
     components: {
      'textarea-component': TextAreaComponent, 
     },
   })
  export default class MainPage extends Vue {
     @Prop
     text!: string;

     private async save() {
       //check if the data is passing 
       console.log(this.text)
       
       //save to the database
       await api.saveText(string)
        .then((Response) => {
        console.log(Response)
       });
  }
  }
</script>

<template> 
   <div>
     <textarea v-bind:value="text">
     </textarea>
   </div>
</template>
<script lang=ts>
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class TextAreaComponent extends Vue {
     text:string = '';
  }
</script>

标签： typescriptvuejs2