2017-03-23 18 views
8

मैं VueJS 2. का उपयोग कर एक मॉडल घटक पर अभी काम कर रहा हूँ, यह मूल रूप से काम करता है - मैं एक बटन पर क्लिक करें और मोडल खुल जाता है, आदि

क्या मैं चाहता हूँ अब मोडल के लिए एक अद्वितीय नाम बनाएं और उस विशेष बटन के साथ बटन को संबद्ध करें।

यह मेरे मन में है। मोडल एक अनूठा नाम संपत्ति है:

<modal name='myName'>CONTENT</modal>

और यह सहयोगी बटन होगा:

<button @click="showModal('myName')"></button>

क्या मैं यह पता लगाने की जरूरत है कि कैसे करने के लिए showModal के पैरामीटर पारित करने के लिए है मोडल घटक।

यहाँ विधि है कि मैं जड़ Vue उदाहरण में उपयोग कर रहा हूँ (यानी, नहीं मेरी मोडल घटक के अंदर) है:

methods: { 
    showModal(name) { this.bus.$emit('showModal'); }, 
} 

मुझे क्या करना चाहते हैं घटक में नाम संपत्ति का उपयोग करने की है - - इस तरह कुछ:

created() { 
    this.bus.$on('showModal',() => alert(this.name)); 
} 

लेकिन यह undefined के रूप में दिखाई देता है।

तो मैं गलत क्या कर रहा हूं? मैं मोडल घटक के अंदर नाम संपत्ति का उपयोग कैसे कर सकता हूं?

नोट:। https://stackoverflow.com/a/42983494/7477670

उत्तर

11

$emit के लिए एक पैरामीटर के रूप में यह दर्रा: अगर आप सोच रहे हैं, तो क्या this.bus $ पर है, तो कृपया एक पिछले प्रश्न है कि मैंने पूछा के लिए निम्न उत्तर देखें।

methods: { 
    showModal(name) { this.bus.$emit('showModal', name); }, 
} 

created() { 
    this.bus.$on('showModal', (name) => alert(name)); 
} 

इसके अलावा, यदि आप मोडल को एक नाम देना चाहते हैं, तो आपको इसे मोडल घटक में प्रोप के रूप में स्वीकार करने की आवश्यकता है।

Vue.component("modal",{ 
    props:["name"], 
    ... 
}) 
फिर

मुझे लगता है कि आप की तरह कुछ करना चाहता हूँ जाएगा,

if (name == this.name) 
    //show the modal 
संबंधित मुद्दे