BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】Vue.jsコンポーネントのメソッドをコンポーネントの外から呼び出す

2022-03-29 21:51:06

質問

例えば、子コンポーネントを持つメインの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 .

EDIT

これでうまくいくようです。 

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

しかし、これは良い解決策ではありません。なぜなら、コンポーネントをchildren配列のインデックスで参照しており、多くのコンポーネントではこれが一定である可能性は低く、コードも読みにくくなるからです。

解決方法は？

最終的に、私は Vueの ref ディレクティブ . これにより、親からコンポーネントを参照し、直接アクセスすることができます。

例

親インスタンスにコンペネントを登録する。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します