表单(父)组件:
export default {
template: `
<form name="form" class="c form" v-on:change="onChange">
<slot></slot>
</form>`,
methods: {
onChange:function(){
console.log("something changed");
}
}
};
和一个 c-tool-bar 组件(子组件)(如果存在)在 c-form 的槽中
export default {
template: `
<div class="c tool bar m006">
<div v-if="changed">
{{ changedHint }}
</div>
<!-- some other irrelevant stuff -->
</div>`,
props: {
changed: {
type: Boolean,
default: false,
},
changedHint: String
}
};
我想要实现的是,当 c-form
的 onChange 被触发时函数
检查子 c-tool-bar 是否存在 && 它有一个 changedHint 文本声明(从后端)它应该将 c-tool-bar
的属性“changed”更改为 true 和 c- bar-tool 会自行更新,因此 v-if="changed"
实际上会显示 changedHint。我阅读了 vue.js 文档,但我真的不知道从哪里开始以及正确的方法是什么。
最佳答案
您可以像这样使用这两个组件:
<parent-component></parent-component>
您将在 :changed
属性中传递一个在 data()
的父组件中定义的变量。注意 :
,我们使用 dynamic props ,因此一旦在父级中更改了 prop 值,它也会更新子级。
要更改提示的显示,请更改作为 prop 传递给子组件的变量的值:
export default {
template: `
<form name="form" class="c form" v-on:change="onChange">
<child-component :changed="shouldDisplayHint"></child-component>
</form>`,
data() {
return {
shouldDisplayHint: false,
};
},
methods: {
onChange:function(){
this.shouldDisplayHint = true; // change the value accordingly
console.log("something changed");
}
}
};
关于javascript - Parent onChange 将子属性设置为 true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41382953/