[英](VueJS) Update parent data from child component
我有一位父母正在将道具传递给孩子,孩子向父母发出事件。 但是,这不能完全正常工作,我不确定为什么。 有什么建议么?
上级:
<template>
<div class="natural-language">
<div class="natural-language-content">
<p class="natural-language-results">
<msm-select :options="payments" :model="isShowingUpdate" />
</p>
</div>
</div>
</template>
<script>
import msmSelect from '../form/dropdown.vue'
export default {
components: {
'msm-select': msmSelect
},
data() {
return {
isShowingUpdate: true,
payments: [
{'value': 'paying anuualy', 'text': 'paying anuualy'},
{'value': 'paying monthly', 'text': 'paying monthly'}
],
}
}
}
</script>
儿童:
<template>
<div class="form-pseudo-select">
<select :model="flagValue" @change="onChange($event.target.value)">
<option disabled value='Please select'>Please select</option>
<option v-for="(option, index) in options" :value="option.value">{{ option.text }}</option>
</select>
</div>
</template>
<script>
export default {
props: {
options: {
elType: Array
},
isShowingUpdate: {
type: Boolean
}
},
data() {
return {
selected: '',
flagValue: false
}
},
methods: {
onChange(value) {
if (this.selected !== value) {
this.flagValue = true;
} else {
this.flagValue = false;
}
}
},
watch: {
'flagValue': function() {
console.log('it changed');
this.$emit('select', this.flagValue);
}
},
created() {
console.log(this.flagValue);
this.flagValue = this.isShowingUpdate;
}
}
</script>
基本上,当选择框中的选项更改时,应该更新布尔标志。 但是,在我的孩子中,我对isShowingUpdate的 定义不确定 。 我想念什么?
您在两个组件之间没有说过的关系。
实际上,您称为parent
的组件是child ...,而child是parent
。
在您的情况下,父组件始终是调用另一个组件的组件:
//Parent component
<template>
...
<msm-select :options="policies" :model="isShowingUpdate" /> << the child
...
</template>
您应该在两个组件之间更改道具/事件。
编辑:
您可以编辑:
onChange(value) {
if (this.selected !== value) {
this.flagValue = true;
} else {
this.flagValue = false;
}
}
对于一个新的如下所示:
对孩子们:
onChange(value) {
if (this.selected !== value) {
this.flagValue = true;
} else {
this.flagValue = false;
}
this.$emit('flagChanged', this.flagValue)
}
在父级上,使用emit
事件捕获并调用其他方法:
//HTML part:
<msm-select :options="payments" :model="isShowingUpdate" v-on:flagChanged="actionFlagChanged" />
//JS part:
methods: {
actionFlagChanged () {
//what you want
}
}
我可以给你一些tips
吗?
它不是一个(非常)好的函数名称,它在onChange事件中称为: onChange
...尝试类似:updateFlag(更多语义)。
我认为您可以删除手表部件并在onChange事件中进行操作
尝试找到一个好的文档/教程(即官方文档)以了解有关父母/孩子交流的更多信息。
记住要添加事件总线导入:
import { EventBus } from './event-bus'
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.