ワイズリマインダー

【Vue3】親から単一コンポーネントの関数を実行させる

index.html

<compo-hoge ref="compoHoge"></compo-hoge>

refを追加する。
値は任意な文字列。

index.js

let myVue = Vue.createApp({ ... }.mount('#app');

/*任意のタイミングで*/
myVue.$refs.compoHoge.funcFuga();

compoHogeはindex.htmlで指定したref値。
funcFuga()は実行したい単一コンポーネントmethods内の関数名。
createApp内で呼び出す場合は、myVueの代わりにthisも使用可能。

compo_hoge.vue

<script scoped>
export default {
  data(){}
 ,methods; {
    funcFuga(){
      console.log('funcHuga!!');
    }
  }
}
</script>

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。