Vue 3 - Composition API - 如何获取道具原始值

Question

我有一个组件接收一些道具并发出自定义事件。我需要 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" }

Answer 1

要获取代理的原始对象，您可以使用 toRaw()

但是你的代码“有味道”

const category = ref(props.category); 在执行 setup 时创建一个值为 props.category 的 ref（如果 props.category 发生变化，[=15 的值=] 不会）。

要么使用 const { category } = toRefs(props);，要么完全跳过这个 ref 恶作剧，只发出 emit("sendcategory", toRaw(props.category));

Vue 3 - Composition API - 如何获取道具原始值

Vue 3 - Composition API - How to get props original value

vue.js

vue-composition-api

vue-props

vue-reactivity