08使用toRefs和toRef
案例截图

目录结构

代码
Person.vue
<template>
<div class="person">
<h1>我是 Person 组件</h1>
<h2>名字:{{ person.name }}</h2>
<h2>数量:{{ person.age }} </h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showAdd">查看信息</button>
</div>
</template>
<script lang="ts" setup>
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
import { reactive,ref,toRef,toRefs } from 'vue'
let person = reactive({
name: '太上老君',
age: 18000,
add: '兜率宫。兜率宫位于江西省鹰潭市的龙虎山,是道教的重要圣地之一。它被认为是太上老君的道场,位于离恨天之上,是道教神话中兜率天宫的一部分。兜率宫原址位于龙虎山天门山,有着悠久的历史和文化背景。',
})
let name = toRef(person,'name')
console.log(name)
console.log(person)
function showAdd() {
alert(person.add)
}
function changeName() {
name.value = name.value == "太上老君" ? '孙悟空' : '太上老君'
console.log(name.value)
}
function changeAge() {
person.age += 1
console.log(person.age)
}
</script>
<style scoped>
.person {
background-color: #ff9e4f;
box-shadow: 0 0 10px;
border-radius: 30px;
padding: 30px;
}
button {
margin: 0 10px;
padding: 0 5px;
box-shadow: 0 0 5px;
;
}
</style>