合作联系微信: w6668263      合作联系电话:177-9238-7426     

vue3解构defineProps失去响应式解决办法

 

先看下面的代码

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>

posted on 2023-10-20 17:25  草率的龙果果  阅读(2305)  评论(0编辑  收藏  举报

导航