vue3.0 基础用法总结

1.v-model 赋值 
  用法同vue2.0 { { xxx }} 

2.defineComponent
        defineComponent函数，只是对setup函数进行封装，返回options的对象
        defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 
         
    2.1 需要注意的地方

• 自定义组件和全局组件的写法

• inject、ref 等的类型约束

• setup 的写法和相应 h 的注入问题

• tsx 中 v-model 和 scopedSlots 的写法

<script lang="tsx">
import { noop, trim } from 'lodash';
import { inject, Ref, defineComponent, getCurrentInstance, ref } from 'vue';
import filters from '@/filters';

export interface IParentDialog {
  show: boolean;
  specFn: (component_id: HostComponent['id']) => Promise<{ data: DictSpecs }>;
}
 
export default defineComponent<IParentDialog>({
  props: {
    show: {
      type: Boolean,
      default: false
    },
    specFn: {
      type: Function,
      default: noop
    }
  },
 
  // note: setup 须用箭头函数
  setup: (props, context) => {
 
    // 修正 tsx 中无法自动注入 'h' 函数的问题
    // eslint-disable-next-line no-unused-vars
    const h = getCurrentInstance()!.$createElement;
 
    const { emit } = context;
    const { specFn, show } = props;
 
    // filter 的用法
    const { withColon } = filters;
 
    // inject 的用法
    const pageType = inject<CompSpecType>('pageType', 'foo');
    const dictComponents = inject<Ref<DictComp[]>>('dictComponents', ref([]));
    
    // ref的类型约束
    const dictSpecs = ref<DictSpecs>([]);
    const loading = ref(false);

    return () => (
     <div> code ....  </div>
    );
  }
});
</script>
 

• 引入 defineComponent() 以正确推断 setup() 组件的参数类型

• defineComponent 可以正确适配无 props、数组 props 等形式

• defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断

• 在 tsx 中，element-ui 等全局注册的组件依然要用 kebab-case 形式

• 在 tsx