vue3+ts 组件封装，以及如何封装一个v-model双向绑定的值

1.prop
通过defineProps定义该组件的入参，它在初始化时执行一次，参数在组件内是只读的，不能被修改，想要修改它，就必须将它赋值给一个变量，在组件中操作该变量即可。

defineProps({
    
    
    value: String,
  });

父组件向子组件传值，可通过:value=“变量”

2. emit
   通过defineEmits，向外暴露事件，并将值传递向外部，外部通过@change=“”，触发

	const emit = defineEmits([ 'change']); // 声明
	const change = (value) => {
    
    
    	emit('change', value);// 在合适的位置暴露出去，将值传递给父组件，也可以添加回调函数，当父组件代码执行完后，返回某个状态或值，子组件接着执行下面的业务逻辑
 	 };
	

3.watch监听器
由于prop的参数只执行一次，当外部的值发生改变时，组件内的值并没有改变，这里需要将值实时监听，并做同步。

import {
    
     ref, reactive, watch } from 'vue';

defineProps({
    
    
    value: String,
  });
  
const newvalue = ref('') 
watch(() => props.value,
    (newVal, oldVal) => {
    
    
      newvalue= newVal;
    }
  );

语法糖，v-model如何实现，vue3中，v-model的命名为modelValue ,我们需要在defineProps中声明一个modelValue的入参，还要在defineEmits中声名update:modelValue，并在合适的位置，向外暴露，

<template>
  <div>
      <a-select :model-value="modelValue" allow-clear @change="change">
      <a-option
        v-for="(item, index) of MODE.data"
        :key="index"
        :value="item.MODEL_NM"
        :label="item.RL_NM"
      />
    </a-select>
  </div>
</template>

<script setup lang="ts">
  import {
    
     reactive } from 'vue';
  import {
    
     queryModeList } from '@/api/common';

  const MODE = reactive({
    
     data: [] });
  queryModeList({
    
    }).then(({
    
     data }) => {
    
    
    MODE.data = data.VALUE_LIST;
  });
  const emit = defineEmits(['update:modelValue', 'change']);
  defineProps({
    
    
    modelValue: String,
  });

  const change = (value) => {
    
    
    emit('update:modelValue', value);
    emit('change', value);
  };
</script>