Question

如何在 vue 3 中实现可重用的组件输入？

2021-04-13

5537

javascript reactjs vue.js

有人能给我一些关于 vue 3 中可重用组件输入的提示吗？就像在 React 中这样：

比如说，

在父组件中使用 <Input /> 可重用组件

import { useState } from 'react';
import Input from './component/Input';

function Home() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    console.log(email, password);
  }

  return (
    <form onSubmit={handleSubmit}>
      <Input id="email" labelText="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <Input id="password" labelText="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

这里 <Input /> 组件：

export default function Input(props) {
  const { id, labelText, value, onChange } = props;

  return (
    <label htmlFor={id}>{labelText}<label>
    <input id={id} value={value} onChange={onChange}>
  );
}

Answer 1

您应该阅读 Vue 3 文档中的 组件基础知识 。

关键概念：

使用 v-bind 指令（或 : 前缀作为简写）进行数据绑定
使用 v-on 指令（或 @ 前缀作为简写）进行事件绑定处理程序
使用双花括号对数据属性进行字符串插值
使用 v-model 指令进行双向数据绑定
使用 props 选项声明属性
使用 ref 创建数据属性，使用 Composition API

Vue 3 中的等效输入组件：

<template>
  <label :for="id">{{ labelText }}</label>
  <input
    :value="modelValue"
    @change="$emit('update:modelValue', $event.target.value)"
    :id="id"
  />
</template>

<script>
export default {
  props: {
    id: String,
    labelText: String,
    modelValue: String,
  },
};
</script>

以及表单：

<template>
  <form @submit="handleSubmit">
    <MyInput id="email" labelText="Email" v-model="email" />
    <MyInput id="password" labelText="Password" v-model="password" />
    <button type="submit">Login</button>
  </form>
</template>

<script>
import MyInput from "@/components/MyInput.vue";
import { ref } from "vue";

export default {
  components: {
    MyInput,
  },
  setup() {
    const email = ref("");
    const password = ref("");

    return {
      email,
      password,
      handleSubmit(e) {
        e.preventDefault()
        console.log("submit", email.value, password.value);
      },
    };
  },
};
</script>

demo

Answer 2

2023 更新使用 Vue 组合 API（推荐方式）：

   // MyInput.js
    <template>
    <label :for="id"> {{ label }} </label>
    <input 
       :id="id" 
       :value="modelValue" 
       type="text" 
       @input="$event => emit('update:modelValue',   
       $event.target.value)" :placeholder="placeholder"
     />
    </template>

   <script  setup>
    defineProps(['modelValue', 'label', 'id', 'placeholder'])
    const emit = defineEmits(['update:modelValue'])
   </script>

并且你可以在 Vue 3 组件中像这样使用它：

   <template>
    <Input id="my-id" label="my label" 
        v-model="myInputValue" />
   <template>
   <script setup>
    const myInputValue = ref('')
   </script>

Answer 3

新方法如何在可重用输入组件中使用带有 defineModel 的 v-model Vue 3.4 ; 有关 Medium 的更多详细信息

// How to define the component (native HTML) 
// components/VInput.vue
<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

/* ***** */
// How to use the component (native HTML)
// App.vue
<VInput v-model="userName" />

如果您使用以前版本的 vue.js（较旧），您可以尝试使用宏 define-models 或使用其他答案中描述的解决方案