英文:
How is vue attaching v-model to child component?
问题
我目前在我的项目中使用 vuetify 3，我将vuetify的v-text-field分离到一个不同的组件中（Input.vue）。代码功能完全正常，但我对v-model如何连接到Input.vue中的v-text-field感到困惑。我们将v-model作为prop传递给Input组件，但我们没有以任何方式将v-model连接到text-field。
这是vuetify库还是vue本身的行为？通常，我会使用provide/inject将我的ref状态传递给子组件，但在这里我无法弄清楚如何做到这一点。
Create.vue
<script>
//表单提交请求
const form = reactive({
'name': '',
'teachers': [],
'subcategories': [],
'tags': [],
'users': [],
'fully_public': false,
'partial_public': false,
'counter': 0,
'min_time':
'publish': 0,
'publish_date':
'reattempt': 0,
'total_reattempt': ''
'image': '',
'description': **
});
</script>
<template>
<Input
v-model="form.min_time"
label="输入最短时间 *"
:disabled="form.counter == 0"
:error-messages="v$.min_time.$errors[0]?.$message || errors.min_time" />
</template>
Input.vue
<script setup>
const props = defineProps({
label: String,
name: String,
});
</script>
<template>
<v-text-field label="label" variant="outlined"></v-text-field>
</template>
英文:
I'm currently using vuetify 3 in my project, I separated the vuetify v-text-field into a different component (Input.vue). The code functions completely well, but I'm confused on how the v-model is being connected to the v-text-field in Input.vue. We are passing the v-model as prop in Input component but we aren't connecting the v-model to the text-field in any way.
Is this behavior of vuetify library or vue itself? I normally pass my ref states to child component using provide/injects, but here I can't figure out how its possible.
Create.vue
<script>
//form submit request
const form = reactive({
'name': '',
'teachers': [],
'subcategories': [],
'tags': [],
'users': [],
'fully_public': false,
'partial_public': false,
'counter': 0,
'min_time':
'publish': 0,
'publish_date':
'reattempt': 0,
'total_reattempt': ''
'image': '',
'description': **
});
</script>
<template>
<Input
v-model="form.min_time"
label="Enter minimum time *"
:disabled="form.counter == 0"
:error-messages="v$.min_time.$errors[0]?.$message || errors.min_time" />
</template>
Input.vue
<script setup>
const props = defineProps({
label: String,
name: String,
});
</script>
<template>
<v-text-field label="label" variant="outlined"></v-text-field>
</template>
答案1
得分: 0
在vue中，未声明的属性会自动传递给子元素的根元素。
通过使用 Fallthrough 属性
英文:
> In vue undeclared attributes are automatically passed onto the root element of the child.
By Using Fallthrough Attributes
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论