ワイズリマインダー

CDN版Vue3でSFC内から親のメソッドを実行してみた【CompositionAPI編】

2022.12.02

デモ表示はこちら

次の条件のもと作成されています。
・Vue3その他もろもろはインストールしたくない。
・CDNからダウンロードした各種jsを同ドメイン内にアップロードしている。
・CompositionAPIを使用。

 

【ポイント】
setupの第2引数のemitを使用する。
子からキャメルケースで投げた場合、親はケバブケースで受け取る。

 

index.html

<div id="app">
 <compo-string @emit-event="fromChildEvent"></compo-string>
 <div>{{ result }}</div>
</div>

 

index.js

const { loadModule } = window['vue3-sfc-loader'];
Vue.createApp({
  setup( ){
    const result = Vue.ref('');
    const fromChildEvent = (  ) => {
      result.value = "child button clicked!";
    };
    return { result, fromChildEvent };
  },
  components: {
    'compo-string': Vue.defineAsyncComponent( () => loadModule('compo_string.vue', vue3['loaderOption']() ) )
  }
}).mount('#app');

 

compo_string.vue

<template>
 <button type="button" @click="clickChildButton">子ボタン</button>
</template>

<script scoped>
export default{
  emits: [ 'emitEvent' ],
  setup( props, context ){
    const clickChildButton = ( e ) => {
      context.emit('emitEvent');
    };
    return { clickChildButton };
  }
}
</script>

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

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