<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>

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>

      );

    };

  },

});

<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>

<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>