เรียกใช้วิธีการส่วนประกอบ Vue.js จากภายนอกส่วนประกอบ

สมมติว่าฉันมีอินสแตนซ์ Vue หลักที่มีคอมโพเนนต์ลูก มีวิธีการเรียกใช้เมธอดที่เป็นของหนึ่งในคอมโพเนนต์เหล่านี้จากภายนอกอินสแตนซ์ Vue ทั้งหมดหรือไม่?

นี่คือตัวอย่าง:

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();

อย่างไรก็ตามนี่ไม่ใช่วิธีแก้ปัญหาที่ดีเพราะฉันอ้างอิงองค์ประกอบโดยดัชนีในอาร์เรย์เด็กและด้วยองค์ประกอบหลายอย่างนี้ไม่น่าจะคงที่และรหัสอ่านน้อย

ในที่สุดฉันเลือกที่จะใช้ วูrefสั่ง สิ่งนี้อนุญาตให้คอมโพเนนต์ถูกอ้างอิงจากพาเรนต์สำหรับการเข้าถึงโดยตรง

เช่น

มีการลงทะเบียน compenent ในอินสแตนซ์หลักของฉัน:

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

แสดงส่วนประกอบใน template / html ด้วยการอ้างอิง:

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

ตอนนี้ที่อื่นฉันสามารถเข้าถึงองค์ประกอบภายนอก

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

ดูซอนี้สำหรับตัวอย่าง: https://jsfiddle.net/xmqgnbu3/1/

(ตัวอย่างเก่าโดยใช้ Vue 1: https://jsfiddle.net/6v7y6msr/ )

ตั้งแต่ Vue2 สิ่งนี้ใช้:

var bus = new Vue()

// ในวิธีการของ component A

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

// ใน hook ของ component B ที่สร้างขึ้น

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

  // ...
})

ดูที่นี่สำหรับเอกสาร Vue และที่นี่คือรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการตั้งค่าบัสเหตุการณ์นี้อย่างแน่นอน

หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับเวลาที่จะใช้คุณสมบัติเหตุการณ์และ / หรือผู้บริหารอำนาจรัฐดูบทความนี้

คุณสามารถใช้ระบบเหตุการณ์ Vue

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

และ

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

นี่คือซอ: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

คำตอบที่ยอมรับ (แตกต่างกันเล็กน้อย) ต่างกันเล็กน้อย:

มีส่วนประกอบที่ลงทะเบียนในอินสแตนซ์หลัก:

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

แสดงส่วนประกอบใน template / html ด้วยการอ้างอิง:

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

เข้าถึงวิธีการส่วนประกอบ:

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

คุณสามารถตั้งค่าการอ้างอิงสำหรับองค์ประกอบเด็กจากนั้นผู้ปกครองสามารถโทรผ่าน $ refs:

เพิ่มการอ้างอิงไปยังองค์ประกอบย่อย:

<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>

สมมติว่าคุณมี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()

หมายเหตุ: ไม่แนะนำให้เข้าถึงส่วนย่อยและองค์ประกอบหลักเช่นนี้

แนวทางปฏิบัติที่ดีที่สุดคือใช้อุปกรณ์และกิจกรรมเพื่อการสื่อสารระหว่างผู้ปกครองและเด็ก

หากคุณต้องการการสื่อสารระหว่างส่วนประกอบให้ใช้vuexหรือevent busอย่างแน่นอน

โปรดอ่านบทความที่มีประโยชน์มากนี้

นี่เป็นวิธีที่ง่ายในการเข้าถึงวิธีการของส่วนประกอบจากส่วนประกอบอื่น ๆ

// 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');
   }
}

นี่คือหนึ่งที่เรียบง่าย

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

ฉันไม่แน่ใจว่ามันเป็นวิธีที่ถูกต้อง แต่อันนี้เหมาะกับฉัน
ก่อนนำเข้าส่วนประกอบซึ่งมีวิธีการที่คุณต้องการโทรหาในส่วนประกอบของคุณ

import myComponent from './MyComponent'

แล้วเรียกวิธีการใด ๆ ของ MyCompenent

myComponent.methods.doSomething()

ฉันใช้วิธีแก้ปัญหาที่ง่ายมาก ฉันได้รวมองค์ประกอบ HTML ที่เรียกใช้วิธีการในองค์ประกอบ Vue ของฉันที่ฉันเลือกใช้ Vanilla JS และฉันเรียกใช้การคลิก!

ใน Vue Component ฉันได้รวมสิ่งต่อไปนี้ไว้:

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

ที่ฉันใช้โดยใช้ Vanilla JS:

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