想象一下下面的情况:
我有一个带有 2 个属性的 Menu
组件:
项目
filterTerm
Menu
组件不能简单地显示项目。它必须先根据给定的 filterTerm
对其进行过滤。
这提出了 2 个问题:
我不知道在显示
items
之前在哪里处理它们。我研究了 Components documentation他们似乎没有提到任何生命周期方法。改变接收到的
items
prop 是个好主意吗?除非 Vue 在每个渲染器上执行深度克隆,我认为这是不合理的,否则改变 prop 可能会产生副作用。因此,我实际上不应该过滤接收到的items
。我应该先克隆它,但我应该在哪里做呢?我可以在data:function() { }
中完成,但是我的methods
在那里不可用:(
那么,在显示 items
之前过滤它们的正确方法是什么?
最佳答案
我会说计算属性对此有好处:
让我们想象一下这个数据:
let raw = [
{
id: 1,
link: '/some-link',
name: 'some-name'
},
{
id: 2,
link: '/other-link',
name: 'other-name'
}
]
以及在属性中获取此数据的组件:
<template>
<div>
<ul>
<li v-for="item in formated"><a :href="item.href">{{ item.libel }}</a></li>
</ul>
</div>
</template>
<script>
export default {
props: ['raw'],
computed: {
formated () {
let menu = []
for(let i 0; i < this.raw.length; i++) {
menu.push({
libel: this.raw[i].name,
href: this.raw[i].link
})
}
return menu
}
}
}
</script>
如您所见,formated
方法是一个计算属性,每次您的 raw
属性更改时都会更新。
关于javascript - 在实际使用 Vue.js Prop 之前如何处理它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39926216/