উপাদানটির বাইরে থেকে একটি Vue.js উপাদান পদ্ধতি কল করুন

Question

ধরা যাক আমার কাছে একটি প্রধান ভ্যু উদাহরণ রয়েছে যার সন্তানের উপাদান রয়েছে। ভ্যু উদাহরণের বাইরে থেকে এই উপাদানগুলির একটির সাথে সম্পর্কিত কোনও পদ্ধতিকে কল করার কোনও উপায় কি আছে?

এখানে একটি উদাহরণ:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

$('#external-button').click(function()
{
  vm['my-component'].increaseCount(); // This doesn't work
});

<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  
  <my-component></my-component>
  <br>
  <button id="external-button">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 5px;">
  <p>A counter: {{ count }}</p>
  <button @click="increaseCount">Internal Button</button>
    </div>
</template>

সুতরাং আমি যখন অভ্যন্তরীণ বোতামটি ক্লিক করি তখন increaseCount()পদ্ধতিটি তার ক্লিক ইভেন্টের সাথে আবদ্ধ থাকে যাতে এটি কল হয়। ইভেন্টটিকে বাহ্যিক বোতামে আবদ্ধ করার কোনও উপায় নেই, যার ক্লিক ইভেন্টটি আমি jQuery দিয়ে শুনছি, সুতরাং কল করার জন্য আমার অন্য কোনও উপায়ের প্রয়োজন হবে increaseCount।

সম্পাদনা

মনে হচ্ছে এটি কাজ করে:

vm.$children[0].increaseCount();

তবে এটি ভাল সমাধান নয় কারণ আমি বাচ্চাদের অ্যারেতে এর সূচক দ্বারা উপাদানটি উল্লেখ করছি এবং অনেকগুলি উপাদান সহ এটি স্থির থাকার সম্ভাবনা নেই এবং কোডটি কম পাঠযোগ্য।

Comments

আপনি যদি চেষ্টা করে দেখতে চান তবে আমি mxins ব্যবহার করে একটি উত্তর যুক্ত করেছি। আমার মতে আমি এইভাবে অ্যাপটি সেটআপ করতে পছন্দ করি।

— ওমর তাঁতী

Answer 1

শেষ পর্যন্ত আমি ভয়ের refনির্দেশিকাটি ব্যবহার করার পক্ষে বেছে নিয়েছি । এটি সরাসরি অ্যাক্সেসের জন্য কোনও উপাদানকে পিতামাতার কাছ থেকে রেফারেন্স করতে দেয়।

যেমন

আমার পিতামাতার দৃষ্টান্তে কোনও প্রতিবেদক নিবন্ধিত করুন:

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

রেফারেন্স সহ টেমপ্লেট / এইচটিএমএলতে উপাদানটি রেন্ডার করুন:

<my-component ref="foo"></my-component>

এখন, অন্য কোথাও আমি বাহ্যিকভাবে উপাদানটি অ্যাক্সেস করতে পারি

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

উদাহরণস্বরূপ এই ঝাঁকুনি দেখুন: https://jsfiddle.net/xmqgnbu3/1/

(পুরানো উদাহরণ ভ্যু ১ ব্যবহার করে: https://jsfiddle.net/6v7y6msr/ )

Comments

কারণ সম্ভবত আপনি এটি সংজ্ঞায়িত করেন নি। লিঙ্কযুক্ত ফিডলটি দেখুন।

— harryg

আপনি যদি ওয়েবপ্যাক ব্যবহার করছেন তবে vmএটি মডিউলগুলি যেভাবে স্কোপ করে সে কারণে আপনি অ্যাক্সেস করতে পারবেন না । আপনি ভালো কিছু করতে পারেন window.app = vmআপনার main.js। উত্স: forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606

— TW airball

এই পদ্ধতির কি সাধারণ হিসাবে বিবেচনা করা যেতে পারে? নাকি এটি হ্যাক?

— সেন্ট 1 পেড

হ্যাক কী বনাম "সাধারণ" কোডিং এর এত সরকারী সংজ্ঞা রয়েছে, তবে এই পদ্ধতিরটিকে হ্যাক বলার পরিবর্তে (বা একই জিনিস অর্জনের "কম-হ্যাকি" উপায়ের সন্ধান করুন) আপনার কেন প্রয়োজন কেন তা প্রশ্ন করা ভাল better এই. বহিরাগত উপাদানগুলির আচরণ ট্রিগার করতে ভ্যু ইভেন্ট ইভেন্টটি ব্যবহার করা অনেক ক্ষেত্রে এটি আরও মার্জিত হতে পারে বা আপনি কেন উপাদানগুলি বাহ্যিকভাবে ট্রিগার করছেন তা জিজ্ঞাসা করুন।

— harryg

আপনি যদি ইতিমধ্যে বিদ্যমান পৃষ্ঠায় কোনও ভিউ উপাদানকে সংহত করার চেষ্টা করছেন তবে এটি সামনে আসতে পারে। পৃষ্ঠাটি সম্পূর্ণরূপে নতুন করে ডিজাইনের পরিবর্তে অতিরিক্ত ক্রিয়াকলাপটি ক্রমবর্ধমানভাবে যুক্ত করা ভাল nice

— অ্যালেন ওয়াং

Answer 2

Vue2 যেহেতু এটি প্রযোজ্য:

var bus = new Vue()

উপাদান ক এর পদ্ধতিতে //

bus.$emit('id-selected', 1)

উপাদান বি এর তৈরি হুক মধ্যে //

bus.$on('id-selected', function (id) {

  // ...
})

ভ্যু ডক্সের জন্য এখানে দেখুন । এবং এই ইভেন্টের বাসটি ঠিক কীভাবে সেট আপ করতে হবে তার আরও বিশদ এখানে ।

আপনি কখন সম্পত্তি, ইভেন্ট এবং / অথবা কেন্দ্রিয়ায়িত রাষ্ট্র পরিচালন ব্যবহার করবেন সে সম্পর্কে আরও তথ্য চাইলে এই নিবন্ধটি দেখুন ।

Comments

স্বল্প ও মধুর! আপনি বিশ্বব্যাপী অপছন্দ তাহলে busপরিবর্তনশীল, আপনি একটি ধাপ যান এবং ব্যবহার করে আপনার উপাদান মধ্যে বাস উদ্বুদ্ধ করতে পারেন সাজসরঞ্জাম । আমি তুলনায় তুলনামূলকভাবে নতুন তাই আমি আপনাকে নিশ্চিত করতে পারি না যে এটি মূর্খ।

— বাইসোর

Answer 3

আপনি ভ্যু ইভেন্ট সিস্টেমটি ব্যবহার করতে পারেন

vm.$broadcast('event-name', args)

এবং

 vm.$on('event-name', function())

এই হিটটি হ'ল: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Comments

@ গুডডিকুল উদাহরণটি সম্পাদনা করা হয়েছে। ভুজেস ২.০-এর পরে সেখানে ব্যবহৃত কিছু পদ্ধতি অবমূল্যায়ন করা হয়েছে

— হেল্ডার লুকাস

কম্পোনেন্টের কেবলমাত্র 1 টি উদাহরণ থাকলে ভাল কাজ করে তবে অনেকগুলি উদাহরণ থাকলে আরও ভাল ব্যবহার করুন $ refs.componal.method ()

— Koronos

Answer 4

গৃহীত উত্তরের কিছুটা আলাদা (সরল) সংস্করণ:

অভিভাবক দৃষ্টান্তে একটি উপাদান নিবন্ধিত করুন:

export default {
    components: { 'my-component': myComponent }
}

রেফারেন্স সহ টেমপ্লেট / এইচটিএমএলতে উপাদানটি রেন্ডার করুন:

<my-component ref="foo"></my-component>

উপাদান পদ্ধতি অ্যাক্সেস করুন:

<script>
    this.$refs.foo.doSomething();
</script>

Answer 5

আপনি সন্তানের উপাদানগুলির জন্য রেফ সেট করতে পারেন তারপরে অভিভাবকরা $ রেফের মাধ্যমে কল করতে পারেন:

সন্তানের উপাদানগুলিতে রেফ যুক্ত করুন:

<my-component ref="childref"></my-component>

পিতামাতার ক্লিক ইভেন্ট যুক্ত করুন:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <my-component ref="childref"></my-component>
  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 2px;" ref="childref">
    <p>A counter: {{ count }}</p>
    <button @click="increaseCount">Internal Button</button>
  </div>
</template>

Comments

এখন পর্যন্ত সবচেয়ে পরিষ্কার সমাধান।

— গ্রীনেন

দুর্দান্ত উত্তর। আমি এইচটিএমএলকে উল্লম্বভাবে কিছুটা ছোট করে সম্পাদনা করতে যাচ্ছি। বর্তমানে আমি কেবলমাত্র 'অভ্যন্তরীণ বোতাম' দেখতে পাচ্ছি যখন আমি এটি চালিত করি যা বিভ্রান্তিকর হতে পারে।

— জেসি রেজা খোরাসানী

Answer 6

বলুন আপনার child_method()সন্তানের উপাদানটিতে একটি রয়েছে:

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

এখন আপনি child_methodপিতা বা মাতা উপাদান থেকে কার্যকর করতে চান :

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

আপনি যদি সন্তানের উপাদান থেকে কোনও পিতামাতার উপাদান পদ্ধতি কার্যকর করতে চান:

this.$parent.name_of_method()

দ্রষ্টব্য: এটি শিশু এবং পিতামাতার উপাদানগুলির মতো অ্যাক্সেস করার প্রস্তাব দেওয়া হয় না।

পরিবর্তে সর্বোত্তম অনুশীলন হিসাবে পিতা-মাতার শিশু যোগাযোগের জন্য প্রপস এবং ইভেন্টগুলি ব্যবহার করুন।

আপনি যদি উপাদানগুলির মধ্যে যোগাযোগ চান তবে অবশ্যই ভ্যুেক্স বা ইভেন্ট বাস ব্যবহার করুন

এই খুব সহায়ক নিবন্ধটি পড়ুন দয়া করে

---

Comments

হ্যাঁ, আপনি করতে পারেন তবে 'সেরা অনুশীলন' হিসাবে বিবেচনা করা হয় না: নীচের দিকে শিশু ব্যবহারের বৈশিষ্ট্যগুলিতে, পিতামাতার ব্যবহার ইভেন্টগুলি upর্ধ্বমুখী। 'পাশের দিকগুলি' কভার করার জন্যও কাস্টম ইভেন্টগুলি বা উদাহরণস্বরূপ ভেক্স ব্যবহার করুন। আরও তথ্যের জন্য এই নিবন্ধটি দেখুন।

— মিউজিকফোর্মলন

হ্যাঁ এটি করার পরামর্শ দেওয়া হয় না।

— roli রোলি 1'18

Answer 7

এটি অন্য উপাদান থেকে কোনও উপাদানটির পদ্ধতিগুলি অ্যাক্সেস করার একটি সহজ উপায়

// This is external shared (reusable) component, so you can call its methods from other components

export default {
   name: 'SharedBase',
   methods: {
      fetchLocalData: function(module, page){
          // .....fetches some data
          return { jsonData }
      }
   }
}

// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];

export default {
   name: 'History',
   created: function(){
       this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
   }
}

Answer 8

এখানে একটি সহজ

this.$children[indexOfComponent].childsMethodName();

Answer 9

আমি নিশ্চিত নই যে এটি সঠিক উপায় তবে এটি আমার জন্য কাজ করে।
প্রথমে উপাদানটি আমদানি করুন যা আপনার উপাদানটিতে কল করতে চান সেই পদ্ধতিটি ধারণ করে

import myComponent from './MyComponent'

এবং তারপরে মাইকম্পেন্টের যে কোনও পদ্ধতিতে কল করুন

myComponent.methods.doSomething()

Comments

এটি আপনাকে আপনার উপাদানগুলির কোনও ডেটা অ্যাক্সেস দেয় না। যদি আপনি doSomethingডেটা থেকে কোনও জিনিস ব্যবহার করেন তবে এই পদ্ধতিটি অকেজো।

— সাইবোয়াশু

Answer 10

আমি খুব সহজ সমাধান ব্যবহার করেছি। আমি একটি এইচটিএমএল উপাদান অন্তর্ভুক্ত করেছি, যা পদ্ধতিটি কল করে, আমার ভ্যু কম্পোনেন্টে যেটি আমি বেছে নিলাম, ভ্যানিলা জেএস ব্যবহার করে, এবং আমি ক্লিক ট্রিগার!

ভ্যু উপাদানটিতে আমি নিম্নলিখিতগুলির মতো কিছু অন্তর্ভুক্ত করেছি:

<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>

যেটি আমি ভ্যানিলা জেএস ব্যবহার করে ব্যবহার করছি:

const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();                

Comments

এটি মোটামুটি ভাল অনুশীলন হিসাবে বিবেচিত হয় না, বিশেষত ওপি-র প্রশ্নের প্রসঙ্গে।

— হাইব্রিড ওয়েব দেব