vue3封装input组件

使用了2种方法去封装input组件(.vue与.jsx)

代码如下

　　父组件：

<template>
  <div>
    <h1>input组件封装</h1>
    <Input v-model:val="val"></Input>
    <InputJsx v-model:valJsx="valJsx"></InputJsx>
    <button @click="getVal">获取input</button>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.jsx";
import Input from "@/components/Input.vue";
import InputJsx from "@/components/Input.jsx";
export default defineComponent({
  name: "",
  components: {
    HelloWorld,
    Input,
    InputJsx,
  },
  setup() {
    const data = reactive({});
    const val = ref("测试");
    const valJsx = ref("测试jsx");
    const getVal = () => {
      console.log("val值" + val.value);
      console.log("valJsx值" + valJsx.value);
    };
    return {
      val,
      valJsx,
      getVal,
      ...toRefs(data),
    };
  },
});
</script>
<style scoped lang="less"></style>

　　子组件：jsx写法

import { defineComponent, ref, watch } from "vue";
import "@/style/test.less";
export default defineComponent({
  props: {
    valJsx: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const changeVal = (event) => {
      console.log(event.target.value);
      emit("update:valJsx", event.target.value);
    };
    return (props) => {
      return (
        <div>
          <input value={props.valJsx} onChange={changeVal} type="text" />
        </div>
      );
    };
  },
});

　　子组件：vue写法

　　

<template>
  <div>
    <input :value="val" @input="$emit('update:val', $event.target.value)" type="text" />
  </div>
</template>

<script lang="ts">
import { toRefs, defineComponent, watch } from "vue";
export default defineComponent({
  name: "Input",
  props: {
    val: {
      type: String,
      default: "",
    },
  },
  emits: ["update:val"],
  setup(props, { emit }) {
    watch(
      () => props.val,
      (newVal) => {
        emit("update:val", newVal);
      },
    );
    return {
      ...toRefs(props),
    };
  },
});
</script>
<style scoped lang="less"></style>

 

多个v-model绑定

　　子组件：

<template>
  <div>title: </div>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)">
  <span>{{title}}</span>
  <div></div>
  <div>description: </div>
  <input
    type="text"
    :value="description"
    @input="$emit('update:description', $event.target.value)">
  <span>{{description}}</span>
</template>

<script>
export default {
  props: {
    title: String,
    description: String
  },
  emits: ['update:title', 'update:description'],
}
</script>

　　父组件：

<template>
<CustomInput v-model:title="title"  v-model:description="description"></CustomInput>
</template>

<script>
import CustomInput from '../components/CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      title: '',
      description: '',
    }
  }
}
</script>

 

完结：2021-09-06 17:27:02