<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// 父組件傳數(shù)據(jù) :msg="xxx"
defineProps({
  msg: String
});
// 子組件通知父組件使用@onSayHello="xxx", 子組件需要使用時eg: emites('onSayHello', 'hello啊啊啊啊')
interface IEmits {
  (e: 'onSayHello', arg1: String): void;
}
const emites = defineEmits<IEmits>();
const state = reactive({
  name: 'alice',
  age: 20,
  sex: '女'
});
// 將reactive封裝的對象, 使用toRefs獲取的對象, 它可以進(jìn)一步解構(gòu), 獲取響應(yīng)式值類型變量
const stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// 將reactive封裝的對象, 使用toRef獲取某個屬性值, 具備響應(yīng)式
const sexRef = toRef(state, 'sex')
const sayHello2 = () => {
  msgRef.value = '你好!'
  emites('onSayHello', 'hello-----')
}
// xx.key = ???適用于reactive封裝的響應(yīng)式對象
const updateState = () => {
  state.name = '雙雙';
  state.age = 22;
  state.sex = '男';
  // 或者找到響應(yīng)式值類型,使用 .value進(jìn)行修改
  // nameRef.value = '雙雙'
  // ageRef.value = 22
  // sexRef.value = '男'
}
// ref值類型, 使用.value進(jìn)行修改
const updateRef = () => {
  msgRef.value = 'hello!'
}
const msgRef = ref('值類型');
</script>
<template>
  <h1>{{ msg }}</h1>
  <h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年齡:{{ ageRef }}, 性別:{{ sexRef }}</h1>
  <button @click="sayHello2">打招呼</button>
  <button @click="updateState">修改名字,年齡,性別</button>
  <button @click="updateRef">用英文打招呼</button>
</template>
<style scoped>
.read-the-docs {
  color: #888;
}
button {
  margin: 10px;
}
</style>

<script>
import { ref, reactive, toRef, toRefs } from 'vue'
export default {
  props: {
    msg: String
  },
  emits: ['onSayHello'],
  setup(props, { emit }) {
    console.log(props); // 父組件傳進(jìn)來的數(shù)據(jù)
    const state = reactive({
      name: 'alice',
      age: 20,
      sex: 1
    });
    // 將reactive封裝的對象, 使用toRefs獲取的對象, 它可以進(jìn)一步解構(gòu), 獲取響應(yīng)式值類型變量
    const stateRef = toRefs(state);
    const { name: nameRef, age: ageRef } = stateRef
    // 將reactive封裝的對象, 使用toRef獲取某個屬性值, 具備響應(yīng)式
    const sexRef = toRef(state, 'sex')
    const sayHello2 = () => {
      msgRef.value = 'hello, 你好!'
      emit('onSayHello', 'hello-----')
    }
    // xx.key = ???適用于reactive封裝的響應(yīng)式對象
    const updateState = () => {
      state.name = '雙雙';
      state.age = 22;
      state.sex = 0;
    }
    // ref值類型, 使用.value進(jìn)行修改
    const updateRef = () => {
      msgRef.value = '你好啊!'
      ageRef.value = 33
      sexRef.value = '男'
    }
    const msgRef = ref('值類型');
    // 注意要返回變量和方法等模板需要使用的東西, 否則頁面不會渲染
    return {
      msgRef,
      sayHello2,
      nameRef,
      ageRef,
      sexRef,
      updateState,
      updateRef,
    }
  }
}
</script>
<template>
  <h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年齡:{{ ageRef }}, 性別:{{ sexRef }}</h1>
  <button @click="sayHello2">say hello</button>
  <button @click="updateState">修改state的值</button>
  <button @click="updateRef">修改ref的值</button>
</template>
<style scoped>
button {
  margin: 10px;
}
</style>

<script setup>
import HelloWorld from './components/Test2.vue'
function onSayHello(a) {
  console.log(a)
}
</script>
<template>
  <HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template>
<style scoped>
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>