如何将来自 child 个组件的两个值与一个事件结合起来？

Question

我无法从 child 组件分配数据。

我只是想实现 emitting a specific value with an event

Child 分量是：

<template>

    <StackLayout orientation="vertical" width="210" height="210"
        backgroundColor="blue" color="white">
        <Label text="Father" row="0" col="1"
            class="h2 text-center p-t-5 text-primary" />
        <ListPicker :items="maleName" v-model="maleIndex" row="1" col="1"
            @selectedIndexChange="selectedIndexofFatherChanged" />
    </StackLayout>
</template>

<script>
    export default {
        data() {
            return {
                maleName: [
                    "Rey",
                    "Antonia",
                    "Victor",
                    "Lincoln",

                ],
                maleIndex: 0
            };
        },
        methods: {
            selectedIndexofFatherChanged() {
                this.$emit("fatherChanged", this.fatherName);
                // console.log("changed to: " + this.fatherName);
            }
        },
        computed: {
            fatherName() {
                return this.maleName[this.maleIndex];
            }
        }
    };
</script>

和Parent组件是：

<template>
    <Page>
        <ActionBar title="Choose Parent" />
        <GridLayout columns="*, *" rows="*,90">
            <SelectMother col="0" @motherChanged="onMotherChanged">
            </SelectMother>
            <SelectFather col="1" @fatherChanged="onFatherChanged">
            </SelectFather>
            <Button text="Show Result" @tap="onButtonTap" row="2"
                colSpan="2" />
        </GridLayout>
    </Page>
</template>

<script>
    import SelectMother from "./SelectMother";
    import SelectFather from "./SelectFather";

    export default {
        components: {
            SelectMother,
            SelectFather
        },
        data() {
            return {
                motherName: null,
                fatherName: null
            };
        },
        methods: {
            onButtonTap() {
                alert("father: " + this.fatherName + " mother: " + this
                    .motherName);
            },
        },
        watch: {
            onFatherChanged(nameFromComponent) {
                nameFromComponent = this.fatherName;
            },
            onMotherChanged(nameFromComponent) {
                nameFromComponent
                    = this.motherName;
            }
        },
    };
</script>

当我在 onFatherChanged 方法中控制日志负载时，它变成 null

如何合并父母并显示结果

Select 来自 child 组件的父亲
Select第二个child的母亲
分配传入的负载并显示结果

请检查{N} Playground

https://play.nativescript.org/?template=play-vue&id=Dez2fV&v=26

Answer 1

而不是

onFatherChanged(payload) {
                payload = this.fatherName;
                console.log(payload);
            },

应该是；

onFatherChanged(payload) {
                this.fatherName = payload;
                console.log(payload);
            },

如何将来自 child 个组件的两个值与一个事件结合起来？

How to combine two values from child components with an event?

vue.js

nativescript-vue

请检查{N} Playground