如何显示从可组合项到组件的数据 Vue js

How to display data from a composable to a component Vue js

提问人:bob 提问时间:10/4/2023 最后编辑:yoduhbob 更新时间:10/4/2023 访问量:57

问:

我遇到了 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>
JavaScript的 vue.js vuejs3 可组合

评论


答:

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>

Vue Playground 示例

评论

0赞 bob 10/4/2023
感谢 fr 共享,它清除了所有内容,但我在这里的挑战是尝试使用可组合项。是否真的可以将数据从单个可组合对象获取到专有可组合对象?
0赞 yoduh 10/4/2023
问题是尝试在多个组件之间共享可组合状态。 在 ComponentA 中与 ComponentB 中是唯一的。如果该值未共享,如何在 EmailInput 中设置并在 ButtonComponent 中显示相同的值?如果确实在可组合项中变成了全局状态变量,则所有组件都变为相同。在 EmailInput 中更新会在 TextInput 中更新,反之亦然,这不是您想要的。可组合项很棒,但它们有局限性。您必须为工作使用正确的工具,但事实并非如此。inputinputinputinputinputinputinput