Vue.js 改变道具 [英] Vue.js Changing props
问题描述
我对如何更改组件内部的属性有点困惑，假设我有以下组件:
<代码>{道具: {可见的: {类型:布尔型，默认值:真}},方法: {隐藏() {this.visible = false;}}}虽然有效，但会给出以下警告:
<块引用>避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖.相反，根据道具的值使用数据或计算属性.道具被变异:可见"(在组件中找到)
现在我想知道处理这个问题的最佳方法是什么，显然 visible 属性是在 DOM 中创建组件时传入的:<Foo :visible="false"></Foo>
不知何故，您应该决定一个州居住的地方，而不是两个.我不知道将它放在 Alert 中还是只放在它的父级中更适合您的用例，但您应该选择一个.
如何决定状态在哪里
父组件或任何兄弟组件是否依赖于状态?
- 是的:那么它应该在父级(或某些外部状态管理中)
- 否:那么让它处于组件本身的状态会更容易
- 两者兼而有之:见下文
在极少数情况下，您可能需要组合.也许您想让父母和孩子都能够隐藏孩子.那么你应该在 parent 和 child 中都有 state(所以你不必在 child 中编辑 child 的 props).
例如，如果: visible &&state_visible，其中 visible 来自 props 并反映父状态中的值，state_visible 来自子状态.
我不确定这是否是您想要的行为，但这里有一个片段.我有点假设您实际上只想在单击子组件时调用父组件的 toggleAlert.
var Alert = Vue.component('alert', {模板:`<div class="alert" v-if="visible && state_visible">警报
<span v-on:click="close">关闭我</span></div>`,道具: {可见的: {要求:真实，类型:布尔型，默认值:假}},数据:函数(){返回 {state_visible: 真};},方法: {关闭() {console.log('时钟这个');this.state_visible = false;}}});var 演示 = 新的 Vue({el: '#demo',成分: {'警报':警报},数据: {有警报:假},方法: {切换警报(){this.hasAlerts = !this.hasAlerts}}}).alert {背景颜色:#ff0000；}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></脚本><div id="demo" v-cloak><alert :visible="hasAlerts"></alert><span v-on:click="toggleAlert">切换警报</span>I'm a bit confused about how to change properties inside components, let's say I have the following component:
{
props: {
visible: {
type: Boolean,
default: true
}
},
methods: {
hide() {
this.visible = false;
}
}
}
Although it works, it would give the following warning:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component )
Now I'm wondering what the best way to handle this is, obviously the visible property is passed in when created the component in the DOM: <Foo :visible="false"></Foo>
Referencing the code in your fiddle
Somehow, you should decide on one place for the state to live, not two. I don't know whether it's more appropriate to have it just in the Alert or just in it's parent for your use case, but you should pick one.
How to decide where state lives
Does the parent or any sibling component depend on the state?
- Yes: Then it should be in the parent (or in some external state management)
- No: Then it's easier to have it in the state of the component itself
- Kinda both: See below
In some rare cases, you may want a combination. Perhaps you want to give both parent and child the ability to hide the child. Then you should have state in both parent and child (so you don't have to edit the child's props inside child).
For example, child can be visible if: visible && state_visible, where visible comes from props and reflects a value in the parent's state, and state_visible is from the child's state.
I'm not sure if this is the behavour that you want, but here is a snippet. I would kinda assume you actually want to just call the toggleAlert of the parent component when you click on the child.
var Alert = Vue.component('alert', {
template: `
<div class="alert" v-if="visible && state_visible">
Alert<br>
<span v-on:click="close">Close me</span>
</div>`,
props: {
visible: {
required: true,
type: Boolean,
default: false
}
},
data: function() {
return {
state_visible: true
};
},
methods: {
close() {
console.log('Clock this');
this.state_visible = false;
}
}
});
var demo = new Vue({
el: '#demo',
components: {
'alert': Alert
},
data: {
hasAlerts: false
},
methods: {
toggleAlert() {
this.hasAlerts = !this.hasAlerts
}
}
})
.alert {
background-color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" v-cloak>
<alert :visible="hasAlerts"></alert>
<span v-on:click="toggleAlert">Toggle alerts</span>
</div>
这篇关于Vue.js 改变道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
