gpt4 book ai didi

vue.js - 在 vue3 中通过 props 传递的组件

转载 作者:行者123 更新时间:2023-12-04 03:55:08 24 4
gpt4 key购买 nike

在 Vue 2 中,我有一个自定义路由解决方案,在某些情况下涉及将组件作为 Prop 提交。

<template>
<div>
<component :is="component" :data="componentData"/>
</div>
</template>

<script>
export default {
props: {
component: {}
componentData: {}
}
}
</script>
在 vue 3 中,这给出了警告:“Vue 收到了一个被设为响应式的组件”。
有没有办法避免这个警告?是否可以将组件动态添加到组件中?
如果您有一组未在 App.components 中全局注册的组件,是否可以在没有警告的情况下渲染它们?
这是 Vue2 中关于此的一个较旧的问题:
Is it possible to pass a component as props and use it in a child Component in Vue?
请注意,上面的代码在 Vue2 中运行良好,这个问题专门针对 Vue3。

最佳答案

停止错误的解决方案似乎是在设置数据之前将我的组件或组件列表包装在 markRaw 中。这会阻止 vue3 使其 react 。
Mark Raw

<script>
import Page1 from './pages/page1.vue'
import Page2 from './pages/page2.vue'
import Page3 from './pages/page3.vue'
import Page4 from './pages/page4.vue'
import Page5 from './pages/page5.vue'
import {markRaw} from "vue"

const components = markRaw({
Page1, Page2, Page3, Page4, Page5
})

export default {
data() {
return {
components
}
}
}
</script>

关于vue.js - 在 vue3 中通过 props 传递的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64055467/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com