来自子组件的 Vue 3 多个 v-model 返回空结果

Question

我想从父组件提交来自子组件的多个输入

父组件：

      <EmployeesPersonalData
             v-model:fn="fn"
             v-model:ln="ln" 
             v-model:nik="nik" 
      />
      <div class="px-2 py-3 text-right sm:px-6">
          <button type="submit" @click="signUp">Save</button>
      </div>


<script setup>
import { ref, onMounted } from 'vue'
import EmployeesPersonalData from 
'./Forms/EmployeesPersonalData.vue';

const auth = getAuth

const fn = ref('')
const ln = ref('')
const nik = ref('')
const email = ref('')
const password = ref('')

function signUp() {
    console.log(email.value)
}</script>

员工个人数据：

    <template>
        <div>
            <label for="first-name">First name</label>
            <input id="first-name" :value="fn" @input="$emit('create:fn', $event.target.value)" type="text" autocomplete="first-name" required placeholder="First Name">
            
        </div>
        <div>
            <label for="last-name">Last name</label>
            <input id="last-name" :value="ln" @input="$emit('create:ln', $event.target.value)" type="text" autocomplete="last-name" required placeholder="Last Name">
            <p>*Required</p>
        </div>
        <div>
            <label for="ssn_nik">SSN/NIK</label>
            <input id="ssn_nik" :value="nik" @input="$emit('create:nik', $event.target.value)" type="number" autocomplete="nik" required placeholder="SSN/NIK">
        </div>
    </div>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    fn : String,
    ln : String,
    nik : String,
})

但是当我尝试console.log(email.value) 或console.log(email) 时，它没有消息/返回任何内容。 我写的代码有什么问题？提前致谢

Answer 1

您还应该定义具有此语法update:property 的发出事件，例如：

<script setup>
import { ref } from 'vue'

const props = defineProps({
    fn : String,
    ln : String,
    nik : String,
})

const emit=defineEmits(['update:fn','update:ln','update:nik'])

并在模板中将 create 替换为 update ：

    <template>
        <div>
            <label for="first-name">First name</label>
            <input id="first-name" :value="fn" @input="$emit('update:fn', $event.target.value)" type="text" autocomplete="first-name" required placeholder="First Name">
            
        </div>
        <div>
            <label for="last-name">Last name</label>
            <input id="last-name" :value="ln" @input="$emit('update:ln', $event.target.value)" type="text" autocomplete="last-name" required placeholder="Last Name">
            <p>*Required</p>
        </div>
        <div>
            <label for="ssn_nik">SSN/NIK</label>
            <input id="ssn_nik" :value="nik" @input="$emit('update:nik', $event.target.value)" type="number" autocomplete="nik" required placeholder="SSN/NIK">
        </div>
    </div>