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

Posted 2023-04-14

【中文标题】如何将来自子组件的两个值与事件结合起来？

【英文标题】：How to combine two values from child components with an event?

【发布时间】：2020-09-09 09:54:57

【问题描述】：

我无法从子组件中分配数据。

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

子组件是：

<template>

    <StackLayout orientation="vertical"  
        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>

父组件是：

<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

如何结合父亲和母亲并显示结果。

从子组件中选择父亲 从第二个子组件中选择母亲 分配传入负载并显示结果

---

---

请查看N Playground

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

【参考方案1】：

代替

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

应该是的；

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