Vue3のdefineComponentの役割についての簡単な説明

エクスポート関数defineComponent(オプション: 不明) {
  isFunction(options) を返します? { setup: options } : options
}

// オーバーロード 1: 直接セットアップ関数
// (ユーザー定義の props インターフェースを使用)
エクスポート関数defineComponent<Props, RawBindings = object>(
  設定： （
    プロパティ: 読み取り専用<Props>、
    ctx: セットアップコンテキスト
  ) => RawBindings | RenderFunction
): DefineComponent<Props, RawBindings>

// オーバーロード 2: プロパティのないオブジェクト形式
// (ユーザー定義の props インターフェースを使用)
// 戻り値の型は Vetur と TSX のサポート用です
エクスポート関数defineComponent<
  プロパティ = {},
  生バインディング = {},
  D = {},
  C は ComputedOptions = {} を拡張します。
  M は MethodOptions = {} を拡張します。
  Mixin は ComponentOptionsMixin = ComponentOptionsMixin を拡張します。
  ComponentOptionsMixin を拡張します = ComponentOptionsMixin、
  E は EmitsOptions = EmitsOptions を拡張します。
  EE は文字列を拡張します = 文字列
>(
  オプション: ComponentOptionsWithoutProps<Props,RawBindings,D,C,M,Mixin,Extends,E,EE>
): DefineComponent<Props、RawBindings、D、C、M、Mixin、Extends、E、EE>

// オーバーロード 3: 配列プロパティ宣言によるオブジェクト形式
// props は { [PropNames 内のキー]?: any } として推論されます
// 戻り値の型は Vetur と TSX のサポート用です
エクスポート関数defineComponent<
  PropNamesは文字列を拡張します。
  生バインディング、
  D、
  C は ComputedOptions = {} を拡張します。
  M は MethodOptions = {} を拡張します。
  Mixin は ComponentOptionsMixin = ComponentOptionsMixin を拡張します。
  ComponentOptionsMixin を拡張します = ComponentOptionsMixin、
  E は EmitsOptions = Record<文字列、任意> を拡張します。
  EE は文字列を拡張します = 文字列
>(
  オプション: ComponentOptionsWithArrayProps<
    プロップ名、
    RawBindings、...>
): コンポーネントの定義<
  読み取り専用<{ [PropNames のキー]?: any }>,
  RawBindings、...>

// オーバーロード 4: オブジェクト プロパティ宣言によるオブジェクト形式
// ./componentProps.ts の `ExtractPropTypes` を参照
エクスポート関数defineComponent<
  // Readonly制約により、TSは{ required: true }の型を扱うことができます。
  // ブール値ではなく定数として。
  PropsOptionsはReadonly<ComponentPropsOptions>を拡張します。
  生バインディング、
  D、
  C は ComputedOptions = {} を拡張します。
  M は MethodOptions = {} を拡張します。
  Mixin は ComponentOptionsMixin = ComponentOptionsMixin を拡張します。
  ComponentOptionsMixin を拡張します = ComponentOptionsMixin、
  E は EmitsOptions = Record<文字列、任意> を拡張します。
  EE は文字列を拡張します = 文字列
>(
  オプション: ComponentOptionsWithObjectProps<
    PropsOptions、RawBindings、D、C、M、Mixin、Extends、E、EE>
): DefineComponent<PropsOptions、RawBindings、D、C、M、Mixin、Extends、E、EE>

<script lang="tsx">
'lodash' から { noop, trim } をインポートします。
輸入 {
  挿入、Ref、defineComponent、getCurrentInstance、ref
} '@vue/composition-api' から;
'@/filters' からフィルターをインポートします。
'@/components/CommonDialog' から CommonDialog をインポートします。
'./ChildTable.vue' から ChildTable をインポートします。{ getEmptyModelRow }
 
エクスポートインターフェースIParentDialog{
  表示: ブール値;
  specFn: (component_id: HostComponent['id']) => Promise<{ data: DictSpecs }>;
}
 
エクスポートデフォルトdefineComponent<IParentDialog>({
  // tsx 内のカスタム コンポーネントでは、コンポーネントを登録する必要があります: {
    子テーブル
  },
  小道具: {
    見せる： {
      タイプ: ブール値、
      デフォルト: false
    },
    仕様関数: {
      タイプ: 関数、
      デフォルト: なし
    }
  },
 
  // 注意: セットアップでは矢印関数を使用する必要があります setup: (props, context) => {
 
    // 'h' 関数が tsx に自動的に挿入されない問題を修正 // eslint-disable-next-line no-unused-vars
    const h = getCurrentInstance()!.$createElement;
 
    const { 出力 } = コンテキスト;
    const { specFn, show } = props;
 
    // フィルターの使用 const { withColon } = filters;
 
    // 使用法を挿入 const pageType = inject<CompSpecType>('pageType', 'foo');
    const dictComponents = inject<Ref<DictComp[]>>('dictComponents', ref([]));
    
    // ref 型制約 const dictSpecs = ref<DictSpecs>([]);
    const ロード = ref(false);
 
    const _lookupSpecs = async (component_id: HostComponent['id']) => {
      読み込み値 = true;
      試す {
        const json = specFn(component_id) を待機します。
        dictSpecs.value = json.data;
      ついに
        読み込み値 = false;
      }
    };
 
    const フォームデータ = ref<Spec>({
      コンポーネントID: ''、
      スペックID: ''、
      モデル: [getEmptyModelRow()]
    });
    err1 は ref('');
    err2 は ref('');
    
    定数_doCheck = () => {
      err1.値 = '';
      err2.値 = '';
      
      const {component_id、specs_id、model} = formdata.value;
      コンポーネントIDが
        err1.value = 'コンポーネントを選択してください';
        false を返します。
      }
      (i = 0 とします; i < model.length; i++) {
        const { brand_id, data } = model[i];
        ブランドIDが
          err2.value = 'ブランドを選択してください';
          false を返します。
        }
        もし （
          フォームデータ.値.モデル.some(
            (m, midx) => midx !== i && String(m.brand_id) === String(brand_id)
          ）
        ）{
          err2.value = 'ブランドが重複しています';
          false を返します。
        }
      }
      true を返します。
    };
 
    定数 onClose = () => {
      出力('update:show', false);
    };
    定数onSubmit = async() => {
      定数ブール値 = _doCheck();
      (!bool) の場合、戻り値:
      定数パラメータ = フォームデータ.値;
      出力('submit', パラメータ);
      閉じる
    };
 
    // 注意: tsx では、element-ui などのグローバルに登録されたコンポーネントでは、依然としてケバブケース形式を使用する必要がありますか?
    戻り値 () => (
      <コモンダイアログ
        クラス="comp"
        title="新着"
        幅="1000px"
        labelCancel="キャンセル"
        ラベル送信="OK"
        vLoading={loading.value}
        表示={表示}
        onClose={onClose}
        onSubmit={onSubmit}
      >
        <el-form labelWidth="140px" class="create-page">
         <el-form-item label={withColon('コンポーネント タイプ')} 必須={true} エラー={err1.value}>
            <el-選択
              クラス="全幅"
              モデル={{
                値: formdata.value.component_id、
                コールバック: (v: 文字列) => {
                  フォームデータ.value.component_id = v;
                  _lookupSpecs(v);
                }
              }}
            >
              {dictComponents.value.map((dictComp: DictComp) => (
                <el-option キー = {dictComp.id} ラベル = {dictComp.component_name} 値 = {dictComp.id} />
              ))}
            </el-select>
          </el-form-item>
          {フォームデータ.値.コンポーネントID?(
              <el-form-item labelWidth="0" label="" 必須={true} エラー={err2.value}>
                <子テーブル
                  リスト={formdata.value.model}
                  onChange={(v: Spec['model']) => {
                    フォームデータ値モデル = v;
                  }}
                  onError={(err: 文字列) => {
                    err3.値 = err;
                  }}
                  スコープスロット={{
                      デフォルト: (スコープ: 任意) => (
                        <p>{ スコープ.foo }</p>
                      ）
                  }}
                />
              </el-form-item>
          ) : ヌル}
        </el-form>
      </コモンダイアログ>
    );
  }
});
</スクリプト>
 
<style lang="scss" スコープ>
</スタイル>