Vue 3 - Composition API - 如何获取道具原始值
Vue 3 - Composition API - How to get props original value
我有一个组件接收一些道具并发出自定义事件。我需要 emit 将道具的值作为参数传递。无论我做什么,我总是收到一个代理而不是原始值。这里是我的实现的简化:
//child-component
<script setup lang="ts">
import { ref, unref } from "vue";
const props = defineProps<{
category: { id: number, label: string};
}>();
const emit = defineEmits(["sendcategory"]);
const category = ref(props.category);
const cat = unref(category);
function send() {
emit("sendcategory", cat);
}
<template>
<div @click="send" >
{{ category.value.label }}
</div>
</template>
这里是父组件的例子
//parent-component
<script setup lang="ts">
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";
const item = { id: 1, label: "testlabel" }
function getcategory(category: {id: number, label: string}) {
console.log(category);
}
</script>
<template>
<ChildComponent :category="item" @sendcategory="getcategory" />
</template>
我总是得到一个 Proxy 对象,我想从子元素接收一个对象(非响应式)等于我作为 prop 传递的对象:{ id: 1, label: "testlabel" }
要获取代理的原始对象,您可以使用 toRaw()
但是你的代码“有味道”
const category = ref(props.category);
在执行 setup
时创建一个值为 props.category
的 ref
(如果 props.category
发生变化,[=15 的值=] 不会)。
要么使用 const { category } = toRefs(props);
,要么完全跳过这个 ref 恶作剧,只发出 emit("sendcategory", toRaw(props.category));
我有一个组件接收一些道具并发出自定义事件。我需要 emit 将道具的值作为参数传递。无论我做什么,我总是收到一个代理而不是原始值。这里是我的实现的简化:
//child-component
<script setup lang="ts">
import { ref, unref } from "vue";
const props = defineProps<{
category: { id: number, label: string};
}>();
const emit = defineEmits(["sendcategory"]);
const category = ref(props.category);
const cat = unref(category);
function send() {
emit("sendcategory", cat);
}
<template>
<div @click="send" >
{{ category.value.label }}
</div>
</template>
这里是父组件的例子
//parent-component
<script setup lang="ts">
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";
const item = { id: 1, label: "testlabel" }
function getcategory(category: {id: number, label: string}) {
console.log(category);
}
</script>
<template>
<ChildComponent :category="item" @sendcategory="getcategory" />
</template>
我总是得到一个 Proxy 对象,我想从子元素接收一个对象(非响应式)等于我作为 prop 传递的对象:{ id: 1, label: "testlabel" }
要获取代理的原始对象,您可以使用 toRaw()
但是你的代码“有味道”
const category = ref(props.category);
在执行 setup
时创建一个值为 props.category
的 ref
(如果 props.category
发生变化,[=15 的值=] 不会)。
要么使用 const { category } = toRefs(props);
,要么完全跳过这个 ref 恶作剧,只发出 emit("sendcategory", toRaw(props.category));