v-mode后不能省略value

我看Vue3文档时,有看到,在使用子组件时,如果v-mode后不指定参数,则子组件需要提供value props和updateValue methods。

所以我是这么理解的,使用第三方组件时,如果参数是value,则可以不传递。

但是,今天在做如下实验时,我省略了value参数,结果页面上的输入框无法显示name的内容,必须要加上vlue参数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<template>
  <div>
    <NGradientText type="info">
      {{ data ? `Welcome, ${data}!` : "What's your name?" }}
    </NGradientText>
    <br/>
    <br/>
    <NInputGroup>
      <NInput v-model:value="name" :style="{width:'50%'}" placeholder="Enter You Name"/>
      <NButton type="primary" ghost :loading="loading" @click="handleLogin"> Confirm</NButton>
    </NInputGroup>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {NButton, NGradientText, NInput, NInputGroup} from 'naive-ui'
import {useRequest} from "vue-request";

function testService(name: string) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(name);
    }, 3000)
  })
}

export default defineComponent({
  components: {
    NButton, NGradientText, NInput, NInputGroup
  },
  setup() {
    const name = ref('@John60676');

    const {run, data, loading} = useRequest(
        testService,
        {
          manual: true,
        });

    // name.value = data;

    const handleLogin = () => {
      run(name.value)
    }

    return {
      data,
      loading,
      name,
      handleLogin,
    }
  }
})

</script>