vue3父子通信ref,toRef,toRefs使用实例详解

<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// 父组件传数据 :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获取的对象, 它可以进一步解构, 获取响应式值类型变量
const stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
const sexRef = toRef(state, 'sex')
const sayHello2 = () => {
  msgRef.value = '你好!'
  emites('onSayHello', 'hello-----')
}
// xx.key = ???适用于reactive封装的响应式对象
const updateState = () => {
  state.name = '双双';
  state.age = 22;
  state.sex = '男';
  // 或者找到响应式值类型,使用 .value进行修改
  // nameRef.value = '双双'
  // ageRef.value = 22
  // sexRef.value = '男'
}
// ref值类型, 使用.value进行修改
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); // 父组件传进来的数据
    const state = reactive({
      name: 'alice',
      age: 20,
      sex: 1
    });
    // 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量
    const stateRef = toRefs(state);
    const { name: nameRef, age: ageRef } = stateRef
    // 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
    const sexRef = toRef(state, 'sex')
    const sayHello2 = () => {
      msgRef.value = 'hello, 你好!'
      emit('onSayHello', 'hello-----')
    }
    // xx.key = ???适用于reactive封装的响应式对象
    const updateState = () => {
      state.name = '双双';
      state.age = 22;
      state.sex = 0;
    }
    // ref值类型, 使用.value进行修改
    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>