// ParentComponent
<script setup lang="ts">
// reactive 創(chuàng)建響應(yīng)式對(duì)象數(shù)據(jù)
import {ref, reactive, toRefs, computed, watch, onMounted, provide } from 'vue';
// 一般創(chuàng)建簡(jiǎn)單類型的數(shù)據(jù)，例如字符串、布爾值等
const number = ref(0);
const changeNumber = () => {
  // 修改數(shù)據(jù)必須加上.value
  number.value++
}
// 一般用來(lái)創(chuàng)建對(duì)象、數(shù)組類型數(shù)據(jù)
const userInfo = reactive({
  name: 'leyi',
  role: 'front-developer',
  introduce: 'nobody'
})
const changeUserInfo = () => {
  userInfo.introduce = 'my name is leyi, i was born in sichuan'
}

// 解構(gòu)reactive創(chuàng)建的響應(yīng)式對(duì)象
const { name, role, introduce } = toRefs(reactive({
  name: 'leyi',
  role: 'front-developer',
  introduce: ''
}))
const changeUserInfoDeconstruction = () => {
  introduce.value = 'a province well know for its spicy food'
  console.log(userInfo.introduce) // 檢查是否執(zhí)行
}
// 計(jì)算屬性
const tripledNumber = computed(() => number.value + 3)

// 數(shù)據(jù)監(jiān)聽 類似effect
watch(number, (newValue, olValue) => {
  console.info('number changed', newValue, olValue)
})

// 父組件穿傳遞數(shù)據(jù)給子組件
import ChildComponent from './myComponents/ChildComponent.vue'

// 獲取子組件傳遞過來(lái)的數(shù)據(jù)
const getChildData = (data) => {
console.info('data from child', data)
}

// 通過ref獲取組件實(shí)例Dom
const btnRef = ref(null)
onMounted(() => {
  console.info('btnRef', btnRef.value)
})

// 調(diào)用子組件里的方法 子組件通過defineExpose進(jìn)行暴露
const childComponentRef = ref(null)
const changeChildComponentContent = () => {
  childComponentRef.value.changeContent()
}

// 通過provide往下傳遞數(shù)據(jù)，所有子孫組件都能接收到 類似于contextProvider
provide("list", [5,6,7,8,9])
</script>

<template>
<div>
  {{ number }}
  <button @click="changeNumber">modify number</button>
</div>
<div>
  {{ userInfo.name }}
  {{ userInfo.role }}
  {{ userInfo.introduce}}
  <button @click="changeUserInfo">modify userInfo</button>
</div>
<div>
  {{ name }}
  {{ role }}
  {{ introduce }}
  <button @click="changeUserInfoDeconstruction">modify userInfo deconstruction</button>
</div>
<div>
  {{ tripledNumber }}
</div>
<div>
  <ChildComponent :data="userInfo" @getChildData="getChildData"  ref="childComponentRef"/>
</div>
<div>
  <button ref="btnRef">get current ref instance dom </button>
</div>
<div>
  <button @click="changeChildComponentContent"> invoke function or attribute of  child component</button>
</div>
</template>

// ChildComponent
<script setup>
import { ref, inject } from 'vue'
// 通過props從父組件獲取數(shù)據(jù)
const props = defineProps(['data'])
console.info('props', props.data.name)
// 通過emit注冊(cè)事件向父組件傳遞數(shù)據(jù)
const emit = defineEmits(['getChildData'])
const sendMessage = () => {
  emit('getChildData', [1,2,3,4,5])
}

// 通過defineExpose向父組件暴露方法或?qū)傩?const content = ref('hello world')
const changeContent = () => {
  content.value = 'hello leyi'
}
defineExpose({
  content,
  changeContent,
})

// 通過inject接收數(shù)據(jù)
console.info('received data from above components', inject('list'))
</script>
<template>
<button @click="sendMessage">send data to parent component</button>
{{ content }}
</template>