Gọi một phương thức thành phần Vue.js từ bên ngoài thành phần

Giả sử tôi có một ví dụ Vue chính có các thành phần con. Có cách nào gọi một phương thức thuộc một trong các thành phần này từ bên ngoài thể hiện Vue không?

Đây là một ví dụ:

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>

Vì vậy, khi tôi nhấp vào nút bên trong, increaseCount()phương thức được liên kết với sự kiện nhấp của nó để nó được gọi. Không có cách nào để liên kết sự kiện với nút bên ngoài, sự kiện nhấp mà tôi đang nghe với jQuery, vì vậy tôi sẽ cần một số cách khác để gọi increaseCount.

BIÊN TẬP

Có vẻ như điều này hoạt động:

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

Tuy nhiên, đây không phải là một giải pháp tốt vì tôi đang tham chiếu thành phần theo chỉ số của nó trong mảng con và với nhiều thành phần, điều này khó có thể giữ nguyên và mã ít đọc hơn.

Cuối cùng, tôi đã chọn sử dụng chỉ thị của Vueref . Điều này cho phép một thành phần được tham chiếu từ cha mẹ để truy cập trực tiếp.

Ví dụ

Có một thành viên đã đăng ký trên ví dụ cha mẹ của tôi:

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

Kết xuất thành phần trong mẫu / html với một tham chiếu:

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

Bây giờ, ở nơi khác tôi có thể truy cập thành phần bên ngoài

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

Xem fiddle này cho một ví dụ: https://jsfiddle.net/xmqgnbu3/1/

(ví dụ cũ sử dụng Vue 1: https://jsfiddle.net/6v7y6msr/ )

Vì Vue2 nên điều này áp dụng:

var bus = new Vue()

// trong phương thức của thành phần A

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

// trong hook hook của thành phần B

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

  // ...
})

Xem ở đây cho các tài liệu Vue. Và đây là chi tiết hơn về cách thiết lập chính xác xe buýt sự kiện này.

Nếu bạn muốn biết thêm thông tin về thời điểm sử dụng các thuộc tính, sự kiện và / hoặc quản lý nhà nước tập trung, hãy xem bài viết này .

Bạn có thể sử dụng hệ thống sự kiện Vue

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

và

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

Đây là câu đố: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Một phiên bản hơi khác (đơn giản hơn) của câu trả lời được chấp nhận:

Có một thành phần được đăng ký trên ví dụ cha:

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

Kết xuất thành phần trong mẫu / html với một tham chiếu:

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

Truy cập phương thức thành phần:

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

Bạn có thể đặt ref cho các thành phần con, sau đó, cha mẹ có thể gọi qua $ refs:

Thêm ref vào thành phần con:

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

Thêm sự kiện nhấp vào cha mẹ:

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

Giả sử bạn có một child_method()thành phần con:

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

Bây giờ bạn muốn thực thi child_methodthành phần cha mẹ:

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

Nếu bạn muốn thực thi một phương thức thành phần cha mẹ từ thành phần con:

this.$parent.name_of_method()

LƯU Ý: Không nên truy cập thành phần con và cha mẹ như thế này.

Thay vào đó, cách tốt nhất là sử dụng Đạo cụ & Sự kiện để liên lạc giữa cha mẹ và con cái.

Nếu bạn muốn liên lạc giữa các thành phần chắc chắn sử dụng vuex hoặc xe buýt sự kiện

Xin vui lòng đọc bài viết rất hữu ích này

Đây là một cách đơn giản để truy cập các phương thức của thành phần từ thành phần khác

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

Đây là một đơn giản

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

Tôi không chắc chắn đó là cách đúng đắn nhưng điều này làm việc cho tôi.
Trước tiên, nhập thành phần có chứa phương thức bạn muốn gọi trong thành phần của bạn

import myComponent from './MyComponent'

và sau đó gọi bất kỳ phương thức nào của MyCompenent

myComponent.methods.doSomething()

Tôi đã sử dụng một giải pháp rất đơn giản. Tôi đã bao gồm một phần tử HTML, gọi phương thức đó, trong Thành phần Vue mà tôi chọn, sử dụng Vanilla JS và tôi kích hoạt nhấp chuột!

Trong Thành phần Vue, tôi đã bao gồm một cái gì đó như sau:

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

Tôi sử dụng Vanilla JS:

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