提问人:bob 提问时间:10/4/2023 最后编辑:yoduhbob 更新时间:10/4/2023 访问量:57
如何显示从可组合项到组件的数据 Vue js
How to display data from a composable to a component Vue js
问:
我遇到了 Vuejs 3 可组合项的问题。尝试为三个输入中的每一个(电子邮件类型输入和文本类型输入)制作一个可组合的输入。我无法可视化在按钮组件模板中键入的电子邮件。即使我将可组合的钩子 js 文件导入到按钮,方式与输入组件相同。我只是不知道如何获取输入数据来显示它。同样的问题是如何实际将收集的输入数据发送到父组件以提交表单,因为我使用的是可组合组件本身。谁能帮忙?
useInputComposable
import { ref } from 'vue'
export function useInput() {
const input = ref('')
let passed = ref('')
function updateInput(newInput) {
input.value = newInput
}
return [ input, updateInput ]
}
父组件
<template>
<TextInput />
<TextInput />
<EmailInput />
<Buttoncomponent />
</template>
文本类型输入
<script setup>
import { useInput } from '@/composables/useInput.js'
const [input, updateInput] = useInput()
</script>
<template>
<div>
<label for="input">{{ input }}</label>
<input
id="input"
type="text"
:value="input"
@input="updateInput($event.target.value)"
/>
</div>
</template>
电子邮件类型输入
<script setup>
import { useInput } from '@/composables/useInput.js'
const [input, updateInput] = useInput()
</script>
<template>
<div class="input">
<input
id="input"
type="email"
:value="input"
@input="updateEmailInput($event.target.value)"
/>
</div>
</template>
按钮组件
<script setup>
import { useInput } from '@/composables/useInput.js'
const [ input ] = useInput()
</script>
<template>
<button>{{ input }} place the email here</button> <!-- the input is empty here ('') -->
</template>
答:
0赞
yoduh
10/4/2023
#1
在这里使用可组合项是不必要的,而且比它应该的更复杂。从使用可组合到 V 模型更改为将子组件中的数据双向绑定到父组件。它更适合你正在做的事情
父组件
<script setup>
import TextInput from './TextInput.vue';
import EmailInput from './EmailInput.vue';
import ButtonComponent from './ButtonComponent.vue';
import { ref } from 'vue'
const email = ref('')
const input1 = ref('')
const input2 = ref('')
</script>
<template>
<TextInput v-model="input1" />
<TextInput v-model="input2" />
<EmailInput v-model="email" />
<ButtonComponent :email="email" />
</template>
文本输入
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<div>
<label for="input">{{ modelValue }}</label>
<input
id="input"
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>
电子邮件输入
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<div class="input">
<input
id="input"
type="email"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>
ButtonComponent
<script setup>
defineProps(['email'])
</script>
<template>
<button>{{ email }}</button>
</template>
评论
0赞
bob
10/4/2023
感谢 fr 共享,它清除了所有内容,但我在这里的挑战是尝试使用可组合项。是否真的可以将数据从单个可组合对象获取到专有可组合对象?
0赞
yoduh
10/4/2023
问题是尝试在多个组件之间共享可组合状态。 在 ComponentA 中与 ComponentB 中是唯一的。如果该值未共享,如何在 EmailInput 中设置并在 ButtonComponent 中显示相同的值?如果确实在可组合项中变成了全局状态变量,则所有组件都变为相同。在 EmailInput 中更新会在 TextInput 中更新,反之亦然,这不是您想要的。可组合项很棒,但它们有局限性。您必须为工作使用正确的工具,但事实并非如此。input
input
input
input
input
input
input
评论