用vue 写一个用户注入功能

首先，需要先定义一个注入组件：

<template>
  <div>
    <h2>用户注入功能</h2>
    <form>
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model="age" />
      </div>
      <button type="submit" @click.prevent="injectUser">注入</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      age: null
    }
  },
  methods: {
    injectUser() {
      // 在这里将用户信息提交到后端进行注入
      console.log(`用户名:${this.username} 年龄:${this.age}`)
    }
  }
}
</script>

然后，在需要使用注入功能的地方，引入该组件，并在需要的时候渲染出来：

<template>
  <div>
    <h2>某个页面</h2>
    <button @click="showInjectForm">注入用户</button>
    <inject-user v-if="isShowInjectForm" />
  </div>
</template>

<script>
import InjectUser from '@/components/InjectUser.vue'

export default {
  components: {
    InjectUser
  },
  data() {
    return {
      isShowInjectForm: false
    }
  },
  methods: {
    showInjectForm() {
      this.isShowInjectForm = true
    }
  }
}
</script>

这样，用户就可以在需要的时候点击按钮，弹出注入组件，输入用户信息进行注入