☰

コンポーネント外からVue.jsコンポーネントメソッドを呼び出す 質問する

tag-icon • tag-icon javascript vue.js
コンポーネント外からVue.jsコンポーネントメソッドを呼び出す 質問する

子コンポーネントを持つメインの Vue インスタンスがあるとします。これらのコンポーネントの 1 つに属するメソッドを、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();

ただし、これは良い解決策ではありません。なぜなら、子配列内のインデックスによってコンポーネントを参照しており、コンポーネントの数が多いとインデックスが一定に保たれず、コードが読みにくくなるからです。

ベストアンサー1

結局私はVueのrefディレクティブこれにより、親からコンポーネントを参照して直接アクセスできるようになります。

例えば

親インスタンスにコンポーネントを登録します。

const 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/0zefx8o6/

(Vue 1 を使用した古い例:https://jsfiddle.net/6v7y6msr/）

Vue3 の編集 - コンポジション API

子コンポーネントには、親コンポーネントで使用するreturn関数が含まれている必要があります。そうでない場合、その関数は親で使用できません。setup

注記：<script setup> ドキュメントデフォルトですべての関数と変数がテンプレートに提供されるため、影響を受けません。

おすすめ記事