我希望确信“Props are overwritten when re-rendering”是一个anti pattern。
const MyButton = Vue.extend({
props: {
obj: {}
},
template:
"<button @click=\"obj.text = 'Value'+Math.round(Math.random()*100)\">Change text in child ({{obj.text}})</button>"
});
const app = new Vue({
el: "#main",
data: {
obj: { text: "Value2" }
},
components: {
MyButton
},
template: `
<div>
<Button @click='obj.text = "Value"+Math.round(Math.random()*100)'>Change text in parent ({{obj.text}})</Button><br>
<MyButton :obj='obj'/> 👈 Pressing here 'mutate' the prop. It is an anti-pattern (Props are overwritten when re-rendering). But it seems to work just fine, how to change this sample so it shows the anti-pattern problem? (https://eslint.vuejs.org/rules/no-mutating-props.html)
</div>`
});密码：https://codepen.io/SVSMITH/pen/LYrXRzW
有人能帮忙吗？
1条答案
按热度按时间k4emjkb11#
在你的例子中，你实际上并没有改变prop，因为你发送给child的是一个对象的引用。这个引用保持不变。看看如果你把child中的模板代码改为：
然后你会看到prop被覆盖了，子节点的值和父节点的值不一样，当父节点更新值的时候，子节点更新后的值会被覆盖，这会导致很严重很难发现的bug，所以在子节点使用emit来更新父节点的值，这样会通过prop更新子节点的值。
如果你有很多这样的道具和发射，你应该考虑使用像Pinia这样的商店。