<script setup lang="ts">
  import { ref } from 'vue';
  import MyComVue from './components/MyCom.vue';

  let money = ref(100)
</script>

<template>
  <div style="padding: 20px; margin: 20px; border: 1px solid red">
    <h1>父組件</h1>
    <p>傳給子組件：{{money}}</p>
    <MyComVue
      :money="money"
      car="特斯拉"
    />
    <MyComVue
      :money="money"
    />
  </div>
</template>

<script setup lang="ts">
  // 1. js中
  // const props = defineProps({
  //   money:{
  //     type: Number,
  //     require: true
  //   },
  //   car: {
  //     type: String,
  //     required: true
  //   } 
  // })
  // 2. ts中
  // props可以通過(guò)解構(gòu)來(lái)指定默認(rèn)值，將指定默認(rèn)值的變量定義為可選參數(shù)
  const {money, car='GTR'} = defineProps<{
    money: number
    car?:string
  }>()
</script>

<template>
  <div style="padding: 20px; margin: 20px; border: 1px solid red">
    <h1>子組件</h1>
    <p>從父組件接收 {{money}} {{car}}</p>
  </div>
</template>

// vite.config.js文件中

export default defineConfig({
  plugins: [vue({
    reactivityTransform: true
  })]
})

<script setup lang="ts">
  import { ref } from 'vue';
  import MyComVue from './components/MyCom.vue';

  let money = ref(100)
  const event1 = (val: number) => {
    console.log('event1',val);
    money.value = val
  }
  const changeCar = (val: string) => {
    console.log('changeCar',val);
  }
</script>

<template>
  <div style="padding: 20px; margin: 20px; border: 1px solid red">
    <h1>父組件</h1>
    <p>傳給子組件：{{money}}</p>
    <MyComVue
      :money="money"
      car="特斯拉"
      @change-car="changeCar"
    />
    <MyComVue
      :money="money"
      @event1="event1"
    />
  </div>
</template>

<script setup lang="ts">
  // 使用ts的泛型指令props類型
  const {money, car='GTR'} = defineProps<{
    money: number
    car?:string
  }>()

  // js中-- const myEnit = defineEmits(['event1'])
  // ts中
  const myEmit = defineEmits<{
    (e:'event1', money:number):void
    (e:'changeCar', val:string):void
  }>()
  const hClick = () => {
    myEmit('event1', 200)
    myEmit('changeCar', 'BWM')
  }
</script>

<template>
  <div style="padding: 20px; margin: 20px; border: 1px solid red">
    <h1>子組件</h1>
    <p>從父組件接收 {{money}} {{car}}</p>
    <button @click="hClick">emit</button>
  </div>
</template>

<script setup lang="ts">
  import {computed, ref} from 'vue'

  // 1. ref<泛型>()
  // 簡(jiǎn)單類型可以省略，復(fù)雜類型推薦使用
  // const todos = ref([{id:1, content: 'sleep', isDone: true}])
  // ref<{id:Number,content: String,sDone: Boolean}[]>([])
  const todos = ref<{
    id:Number
    content: String
    isDone: Boolean
  }[]>([])

  setTimeout(()=>{
    todos.value = [
      {id:1, content: 'sleep', isDone: true},
      {id:2, content: 'work', isDone: false}
    ]
  },1000)

  // 2. 計(jì)算屬性: 已完成數(shù)量
  // 通過(guò)泛型可以指定computed計(jì)算屬性的類型，通?？梢允÷?
  const leftCount = computed(() => {
    return todos.value.filter(item => item.isDone).length
  })
</script>

<template>
  <div>
    <ul>
      <li v-for="item in todos">{{item.content}} {{item.isDone}}</li>
    </ul>
    已完成: {{leftCount}}
  </div>
</template>

const move = (e: MouseEvent) => {
  mouse.value.x = e.pageX
  mouse.value.y = e.pageY
}

<-- 鼠標(biāo)懸停在 $event 上會(huì)提示類型為 MouseEvent -->
<h1 @mousemove="move($event)">根組件</h1>

<template>
  <div>
    <h1 ref="refH1">ref</h1>
    <!-- 點(diǎn)擊按鈕在控制臺(tái)打印 H1 的中的value值 -->
    <button @click="hClick">click</button>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const refH1 = ref<null | HTMLHeadElement>(null)
  const hClick = () => {
    console.log(refH1.value?.innerHTML);
  }
</script>

let nestedProp = obj.first?.second;
console.log(res.data?.data)
obj.fn?.()

if (obj.fn) {
    obj.fn()
}
obj.fn && obj.fn()

// 等價(jià)于
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

// 告訴typescript, 明確的指定obj不可能為空
let nestedProp = obj!.second;