vue3.0 sfcのセットアップの変更について簡単に説明します。

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      挨拶: 'Hello World!'
    }
  }
}
</スクリプト>

<テンプレート>
  <p class="greeting">{{ 挨拶 }}</p>
</テンプレート>

<スタイル>
.挨拶{
  色: 赤;
  フォントの太さ: 太字;
}
</スタイル>

<script lang="ts">
  'vue' から {defineComponent} をインポートします。

    エクスポートデフォルトdefineComponent({
    設定（） {
      戻る {
        // テンプレートに公開されるプロパティ }
    }
  })
</スクリプト>

<スクリプト>
'vue' から {defineComponent, ref} をインポートします。

エクスポートデフォルトdefineComponent({
  設定（） {
    定数カウント = ref(0)
    戻る {
      カウント
    }
  }
})
</スクリプト>

<テンプレート>
  <div>
    親{{count}}
  </div>
</テンプレート>

<スクリプト設定 lang="ts">
'vue' から {ref} をインポートします

  定数カウント = ref(0)
</スクリプト>

<テンプレート>
  <div>
    親{{count}}
  </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent} をインポートします。
'./childComponent' から子コンポーネントをインポートします。

エクスポートデフォルトdefineComponent({
  コンポーネント:
    子供
  },
  設定（） {
    // ...
  }
})
</スクリプト>

<テンプレート>
  <div>
    親
    <子供 />
  </div>
</テンプレート>

<スクリプト設定 lang="ts">
'./childComponent' から子コンポーネントをインポートします。
</スクリプト>

<テンプレート>
  <div>
    親
    <子供 />
  </div>
</テンプレート>

// 親.vue
<テンプレート>
  <子:count={count} />
</テンプレート>
<script lang="ts">
'vue' から {defineComponent,ref} をインポートします。
'./childComponent' から子コンポーネントをインポートします。

エクスポートデフォルトdefineComponent({
  コンポーネント:
    子供
  },
  設定（） {
    定数カウント = ref(0)
    戻る {
      カウント
    }
  }
})
</スクリプト>

// 子.vue
<テンプレート>
  子{{count}}
</テンプレート>
<script lang="ts">
'vue' から {defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({
  プロパティ: ['count'],
  セットアップ(プロパティ) {
    戻る {}
  }
})
</スクリプト>

// 親.vue
<テンプレート>
  <子:count={count} />
</テンプレート>
<スクリプト設定 lang="ts">
'vue' から {ref} をインポートします
'./childComponent' から子コンポーネントをインポートします。

  const count = ref<数値>(0)
</スクリプト>

// 子.vue
<テンプレート>
  子{{count}}
</テンプレート>
<スクリプトの設定>
プロパティを定義します(['count'])
</スクリプト>

<スクリプトの設定>
定義プロパティ({
  count: 数、
  タイトル：
    タイプ: 文字列、
    デフォルト: 'ヘッダー'
  },
  データ： {
    タイプ: オブジェクト、
    デフォルト（） {
      戻る {}
    }
  }
})
</スクリプト>

<script lang="ts" セットアップ>
インターフェースd{
  名前: 文字列
  }

  定義プロパティ<{
  count: number // 数値はts構文で置き換える必要があります title: string
  データ:d
}>()
</スクリプト>

<script lang="ts" セットアップ>
インターフェースd{
  名前: 文字列
  }

  const {count = 0, title = 'header', date = { name: 'a' }} = defineProps<{
  count: number // 数値はts構文で置き換える必要があります title: string
  データ:d
}>()
</スクリプト>

<script lang="ts">
// withDefaultsをインポートすることを忘れないでください
'vue' から { withDefaults } をインポートします

  インターフェースd{
  名前: 文字列
  }

  const props = withDefaults(defineProps<{
  count: number // 数値はts構文で置き換える必要があります title: string
  データ:d
}>(), {
  カウント: 0,
  タイトル: 'ヘッダー',
  データ: () => ({name: '王小二'})
})
</スクリプト>

<スクリプト設定 lang="ts">
  // イベントを定義し、型に注釈を付ける // TS 以外の記述: const emittings = defineEmits(['create'])
  const 出力 = defineEmits<{
    (e: 'create'、値: 文字列): void
  }>()

    // トリガーイベント const addTodo = () => {
    出力('create', 'hi')
 }
</スクリプト>