Javascript （VueJS）从子组件更新父数据

我有一位家长正在向孩子传递道具，孩子会向家长发送事件。然而，这并不完全有效，我不知道为什么。有什么建议吗

家长：

<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>

从“../form/dropdown.vue”导入MSMSSelect
导出默认值{
组成部分：{
“msm选择”：msm选择
},
数据（）{
返回{
isShowingUpdate:是的，
付款：[
{'value'：'paying anualy'，'text'：'paying anualy'}，
{'value'：'payingmonthly'，'text'：'payingmonthly'}
],
}
}
}

儿童：

<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>

请选择
{{option.text}
导出默认值{
道具：{
选项：{
elType:Array
},
isShowingUpdate：{
类型：布尔型
}
},
数据（）{
返回{
已选择：“”，
flagValue:false
}
},
方法：{
onChange（值）{
如果（选择此参数！==值）{
this.flagValue=true；
}否则{
this.flagValue=false；
}
}
},
观察：{
“flagValue”：函数（）{
log（'it changed'）；
此.emit（'select'，此.flagValue）；
}
},
创建（）{
console.log（this.flagValue）；
this.flagValue=this.isShowingUpdate；
}
}

---

基本上，当选择框中的选项更改时，布尔标志应该更新。然而，在我的孩子身上，我变得未定义，因为正在显示更新。我遗漏了什么？

这两个组件之间没有你所说的关系

您称之为父组件的组件实际上是子组件。。。并且子对象是

父对象

在您的情况下，父组件始终是调用另一个组件的组件：

//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;
            }
            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
        }
    }

---

希望有帮助

这两个组成部分之间没有你所说的关系

您称之为父组件的组件实际上是子组件。。。并且子对象是

父对象

在您的情况下，父组件始终是调用另一个组件的组件：

//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;
            }
            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
        }
    }

---

希望有帮助

你好@JP。奥莱特。你上面说的很有道理，我已经修改了我的代码。但是，我仍然无法将prop值从父对象传递给子对象（未定义）。如果我发布更新的代码会有帮助吗？是的，更新代码以便为社区获得更好的帮助！但也许首先试着读一点关于组件（双重数据绑定、道具、事件等）Hi@JP之间父子通信的内容。奥莱特。你上面说的很有道理，我已经修改了我的代码。但是，我仍然无法将prop值从父对象传递给子对象（未定义）。如果我发布更新的代码会有帮助吗？是的，更新代码以便为社区获得更好的帮助！但也许首先试着读一点关于组件之间父子通信的内容（双重数据绑定、道具、事件等）