先看下面的代码
const props = defineProps({
showName: {
type: String,
default: "123",
},
});
const { showName } = props;我们发现这个东西虽然可以展示到页面但是它失去了响应式。
那么正确的使用姿势应该如下
const props = defineProps({
showName: {
type: String,
default: "123",
},
});
// const { showName } = props;
const { showName } = toRefs(props);
toRef 和 toRefs 的作用、用法、区别
- toRef: 复制 reactive 里的单个属性并转成 ref
- toRefs: 复制 reactive 里的所有属性并转成 ref
let info = reactive({
name: 'Tony',
greet: 'Hello'
})
// 复制 info 里的 greet 属性
let rGreet = toRef(info, 'greet')
let info = reactive({
name: 'Tony',
greet: 'Hello'
})
// 复制整个 info
let rInfo = toRefs(info)
注意要点
- template 要想访问 toRefs 的值，需要带上
.value如果不带上，就会出现双引号。 - template 要想访问 toRef 的值，不需要带上
.value
<template>
<div>{{ p.showName }}</div>
<div>{{ p.showName.value }}</div>
</template>
<script setup>
const props = defineProps({
showName: {
type: String,
default: "123",
},
});
const p = toRefs(props);
console.log(p.showName.value);
// const { showName } = toRefs(props);
// const { showName } = props;
</script>