vue3+typescript自定义input组件

初学Vue3+ts，有不足的地方请大佬更正！！！

 

 

可以看看官网  https://v3.cn.vuejs.org/guide/component-custom-events.html#定义自定义事件

 

<template>
  <!-- 父组件 -->
  <div class="hello">
    <p>{{ text }}</p>
    <!-- v-model===v-model:modelValue -->
    <HInput v-model="text" placeholder="请输入xxXxx"></HInput>
  </div>
</template>

// 父组件ts部分 在script上加上语言类型 <script lang='ts'>
import { defineComponent, ref } from "vue";
// 引入tsx不需要写后缀 引入vue需要写全文件后缀
import HInput from "./HInput";

export default defineComponent({
  components: {
    HInput,
  },
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    // 定义响应式数据
    let text = ref("");
    return { text };
  },
});

// 子组件    HInput.tsx
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'HInput',
    // emits已发送的事件  modelValue是默认的不可删除 可以更改（父组件的v-model===v-model:modelValue）
    emits: ['update:modelValue'],
    props: {
        // 父组件绑定的v-model
        modelValue: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit, attrs }) {
        function onInput(event: Event) {
            // 类型断言     断定event.target一定是html input标签   不然不能点value
            let input = (event.target as HTMLInputElement).value
            if (props.modelValue !== input) {
                // 发送事件 此时父组件会监听到
                emit('update:modelValue', input)
            }
        }
        return () => {
            return (
                <div>
                    <p>{props.modelValue}</p>
                    <input type="text"
                        value={props.modelValue}
                        onInput={onInput}
                        placeholder={attrs.placeholder as string}
                    />
                    {/* attrs.placeholder as string  类型断言 断定他一定是字符串 */}
                </div>
            );
        }
    }
})