यह मेरा पहला उचित Vue JS प्रोजेक्ट है ... मैंने स्टैक ओ की खोज की है और मुझे कुछ भी नहीं मिला जो विशेष रूप से मेरी समस्या को संबोधित करता है, लेकिन अगर यह पहले ही पूछा जा चुका है तो मैं क्षमा चाहता हूं।

समस्या

मेरे पास दो घटक हैं, माता-पिता पृष्ठ लेआउट है, जबकि बच्चा उस पृष्ठ का एक मॉड्यूल है। जब कोई चाइल्ड कंपोनेंट में एक बटन पर क्लिक करता है, तो मैं पैरेंट कंपोनेंट में एक फंक्शन ट्रिगर करना चाहता हूं।

प्रक्रिया का $emit भाग VueJS Dev Tools के अनुसार सही ढंग से फ़ायरिंग कर रहा है, लेकिन पैरेंट में फ़ंक्शन ट्रिगर नहीं होता है।

मुझसे कहां गलती हो रही है?

यहाँ मेरा संक्षिप्त कोड है (मैंने इस मुद्दे से संबंधित कुछ भी नहीं हटा दिया है) ...

अभिभावक घटक

<template>
    <div :toggle-nav="showHideNav" :class="navState">
        <div class="wrapper">
            <layout-toolbar></layout-toolbar>
        </div>
    </div>
</template>
<script>
    import layoutToolbar from '~/components/layout/toolbar.vue'

    export default {
        components: {
            layoutToolbar,
        },
        data: function() {
            return {
                navState: 'menu-closed'
            }
        },
        methods: {
            showHideNav: function(event) {
                if (this.navState == 'menu-closed') {
                    this.navState = 'menu-open'
                } else {
                    this.navState = 'menu-closed'
                }
            }
        }
    }
</script>

बाल घटक

<template>
    <div class="toolbar" role="navigation">
        <div class="tools" role="group">
            <button 
                class="button-icon" 
                aria-label="Open Navigation" 
                @click="$emit('toggle-nav')">
                    <i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
                    <span class="sr-only">Open Navigation</span>
            </button>
        </div>
    </div>
</template>

क्या मुझे प्रॉप्स का उपयोग करने की आवश्यकता है?

दी जा सकने वाली किसी भी मदद की सराहना करें।

1
AlxTheRed 4 पद 2018, 14:28

1 उत्तर

सबसे बढ़िया उत्तर

आपको एक फ़ंक्शन को प्रोप के रूप में पास करना होगा और फिर उस फ़ंक्शन को अपने बच्चे के घटक से उत्सर्जित करना होगा। तो आपका मूल टेम्पलेट इस तरह दिखता है।

<template>
    <div :toggle-nav="showHideNav" :class="navState">
        <div class="wrapper">
            <layout-toolbar @showHideNav="showHideNav"></layout-toolbar>
        </div>
    </div>
</template>

और आपका चाइल्ड टेम्प्लेट इस तरह दिखता है

<template>
    <div class="toolbar" role="navigation">
        <div class="tools" role="group">
            <button 
                class="button-icon" 
                aria-label="Open Navigation" 
                @click="$emit('showHideNav',<pass-your-event-or-data>)">
                    <i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
                    <span class="sr-only">Open Navigation</span>
            </button>
        </div>
    </div>
</template>
2
Pulkit Aggarwal 4 पद 2018, 14:35