(VueJS)从子组件更新父数据
(VueJS)从子组件更新父数据
提问于 2017-11-02 09:58:02
我有一个家长，他把道具传给一个孩子，孩子会向父母发送事件。然而，这是没有充分发挥作用的，我也不知道为什么。有什么建议吗？
父级：
<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.的未定义的我遗漏了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-02 10:35:29
这两个组成部分之间没有你说的那种关系。
您称之为parent的组件实际上是子组件..。孩子是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'希望能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47072349
复制相关文章
相似问题
腾讯云开发者
