// 父組件：和 vue2 一樣正常傳值
<template>
  <div class="login-page">
    <cp-nav-bar title="登錄" right-text="注冊(cè)"></cp-nav-bar>
  </div>
</template>

// 子組件：接收
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
  title: string
  rightText?: string // ？表示可傳可不傳
}>()
// js中使用
console.log(props.title)
</script>
 
<template>
  <!-- 模板中直接使用變量名 -->
  <van-nav-bar
    fixed
    left-arrow
    :title="title"
    :right-text="rightText"
  ></van-nav-bar>
</template>

const props = withDefaults(defineProps<{
  title?: string
  rightText?: string
}>(),{
  title: '首頁'
})
 
// 以上代碼通過語法糖解構(gòu)，可以優(yōu)化成如下代碼：
const { title, title= "首頁" } = defineProps<{
  title?: string
  rightText?: string
}>();

// 子傳
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()
 
// 父組件：和 vue2 一樣正常接收
// @changeMoney="方法名"

// const money = ref<number>(10)
const money = ref(10)

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])
list.value = [
  { id: 1, name: '吃飯', done: false },
  { id: 2, name: '睡覺', done: true }
]

const total = computed<string>(() => (count.value * 2).toFixed(2));

<script setup lang="ts">
import { onMounted, ref } from 'vue';
 
const input = ref< HTMLInputElement | null >(null)
 
onMounted(()=>{
  // 如果獲取的元素不是input,就可能沒有value值
  console.log(input.value?.value);
})
</script>
 
<template>
  <div>App組件</div>
  <input type="text" ref="input" value="abc">
</template>

  // 一定要確定不為空?。?！
  console.log(input.value!.value)
  input.value!.value = '123'

// 參考示例:自定義組件的類型,必須是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'
 
declare module 'vue' {
  interface GlobalComponents {
    CpIcon: typeof CpIcon
  }
}