Question

这是我的PhoneLineNumberComponent。它运行良好，但是我希望当用户单击父组件上的按钮时，将加载子组件表单。 PhoneLineNumberComponent是我的子组件而ButtonComponent是我的父组件

<template>
    <div>
        <form v-for="(line,index) in lines" v-bind:key="index">
            <div class="form-group">
                <div class="col-lg-6">
                    <div class="row">
                       <div class="form-group">
                       <input v-model="line.number"
                                   float-label="Phone Number"
                                   numeric-keyboard-toggle
                                   placeholder="5551234567"
                                   type="text"
                                   class="form-control"
                                   value="" />

                        </div>
                    </div>
                </div>

                <button type="button" v-if="index + 1 === lines.length"  @click="addLine">Add</button>
                <button type="button" @click="removeLine(index)">Delete</button>


            </div>
            </form>
    </div>
</template>

<script>
    export default {
        name: 'PhoneNumberLineComponent',
        data() {
            return {
                lines:[],
                blockRemoval: true,
                index:[],
            }
        },
        watch: {
            lines() {
                this.blockRemoval = this.lines.length <= 1
            }
        },
        methods: {
            addLine() {
                let checkEmptyLines = this.lines.filter(line => line.number === null)
                if (checkEmptyLines.length >= 1 && this.lines.length > 0) return
                this.lines.push({
                    countryCode: null,
                    number: null,

                })
            },
            removeLine(lineId) {
                if (!this.blockRemoval) this.lines.splice(lineId, 1)
            }
        },
        mounted() {
            this.addLine()
        }

    }
</script>

<style scoped>
</style>

这是我的ButtonComponent。我希望当用户单击ButtonComponent子组件PhoneLineNumber上的按钮时被触发。

<template>


    <div>

        <PhoneNumberLineComponent></PhoneNumberLineComponent>


    </div>


</template>

<script>
    import PhoneNumberLineComponent from './PhoneNumberLineComponent';
    export default {
        name:'ButtonComponent',
        components: {
            PhoneNumberLineComponent
        },
        data() {
            return {
                lines: [],
                blockRemoval: true,
                index:[],
            }
        },

    };
</script>

<style scoped>
</style>

Answer 1

您可以将控件点击的数据（例如toggleShow）设置为布尔类型，并将v-if用于组件触发器

<template>


    <div>

        <PhoneNumberLineComponent v-if="toggleShow"></PhoneNumberLineComponent>

        <button @click="toggleShow = !toggleShow">Button</button>
    </div>


</template>

<script>
    import PhoneNumberLineComponent from './PhoneNumberLineComponent';
    export default {
        name:'ButtonComponent',
        components: {
            PhoneNumberLineComponent
        },
        data() {
            return {
                lines: [],
                blockRemoval: true,
                index:[],
                toggleShow: false
            }
        },

    };
</script>

Vue如何在提交表单时触发子组件

1 个答案: