如何解决避免直接更改道具:相反,根据道具的值使用数据或计算属性道具被突变:“物品”
我正在为每个页面传递数组形式的面包屑的参数。
我收到以下警告
避免直接更改道具,因为该值将被覆盖 每当父组件重新渲染时。而是使用数据或 根据属性值计算属性。道具被突变: “项目”
面包屑组件
<template>
<vs-row class="vs-breadcrumb-row" vs-type="flex" vs-justify="space-around">
<vs-col
type="flex"
vs-justify="center"
vs-align="center"
vs-lg="12"
vs-sm="12"
vs-xs="12"
code-toggler
>
<vs-card class="br-0">
<h4 class="card-title mb-0 d-flex">
<vs-row vs-justify="space-between" vs-align="center">
{{ pageTitle }}
<div class="d-flex align-items-center">
<vs-breadcrumb separator="chevron_right"
:items="breadcrumbLinks"
></vs-breadcrumb>
</div>
</vs-row>
</h4>
</vs-card>
</vs-col>
</vs-row>
</template>
<script>
export default {
name: "Breadcrumbs",props: {
pageTitle: {
type: String
},breadcrumbLinks: {
type: Array
}
}
};
</script>
布局结构是
- 仪表板-将数组参数发送到默认布局,默认布局将其传递到面包屑
- 默认布局
- Breaducrumb
- 默认布局
仪表板组件
export default {
name: "Dashboard",components: {
DefaultLayout
},data: () => ({
breadcrumbLinks: [
{
title: global.vm.$t('breadcrumbs.home'),url: ""
},{
title: global.vm.$t('breadcrumbs.dashboard'),active: true
}
],})
};
解决方法
发送给孩子的道具不应在其父组件之外进行修改。
Dashboard - sending the array param to default layout and default layout pass it to breadcrumb
Default Layout
Breaducrumb
您的breadcrumbLinks
道具在创建的Dashboard
组件之外进行了更改,因此,您可能正在Default Layout
或Breaducrumb
组件上对该道具进行更改。
如果您避免在其组件之外更改道具,则将避免出现此警告。 但这是警告,而不是错误,它的意思是,如果父组件发生突变,则子组件(在这种情况下,默认布局和面包屑)将使用先前或最初在父组件上设置的值进行更新。
因此,您对子组件上的prop所做的任何更改都将丢失,这可能不是问题,可以使您的代码完美运行,但这当然是应该避免的模式。
如果要变异道具:
- 将$ emit发送给拥有此道具作为数据的父项,并在那里执行更改。 Here you can read about custom events - VueDocs
- 使用全局状态管理器作为Vuex
如果您不需要任何这些,请向我们展示修改breadcrumbLinks
属性的功能。
它应该在DefaultLayout或Breadcrumb组件中的某个位置,但是请确保它不在您发布的代码上。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。