web-dev-qa-db-ja.com

Vue.js-別のコンポーネントからメソッドを呼び出す方法

Vue.Js v2を使用しています。送信後にデータをリロードするために、component2-> c2methodでcomponent1-> c1methodを呼び出したい。

Vue.component('component1', {
  methods: {
    c1method: function(){
     alert('this is c1method')
    },
  }
})
Vue.component('component2', {
  methods: {
    c2method: function(){
     component('component1').c1method()//like this
    },
  }
})
javascriptvue.jsvuejs2vue-component
22
Miri

ドキュメントはこの状況に対処します

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

コンポーネントに同じ親がある場合、親がリッスンするイベントを発行できます。 refプロパティを設定すると、親からc1methodを呼び出すことができます。

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

10
Eric Guan

親子関係以外の場合、これはこれと同じです。 1つのメソッド、他のコンポーネントからのコンポーネントの任意のメソッドを呼び出します。 $on関数を$rootインスタンスに追加し、$rootにアクセスして$emit関数を呼び出す他のコンポーネントから呼び出します。

最初のコンポーネント

 .... 
 mount（）{
 this。$ root。$ on（ 'component1'、（）=> {
 //コードが追加されますhere 
 this.c1method（）
} 
}

2番目のコンポーネントでは、$emitの$root関数を呼び出します

 ... 
 c2method：function（）{
 this。$ root。$ emit（ 'component1'）// like this 
}、

ソケットのように機能します。参照はこちら

https://stackoverflow.com/a/50343039/6090215

25
Mir Ayman Ali

これを試してください。

<template>
 ...
 <component1 ref='componentOne'>
...
</template>
<script>
  Vue.component('component2', {
    methods: {
     c2method: function(){
       this.$refs.componentOne.c1method();
     }
   }
  });
</script>
3
Abhishek Kanojia