ワイズリマインダー

Vue3をインストールせずに親からSFCのメソッドを実行してみた【CompositionAPI編】

2022.12.02

デモ表示はこちら

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

 

【ポイント】
インストール版ではないのでref()はVue.ref()と記述する。
refで定義した値を変更するためにはvalueにアクセスする。

 

index.html

<div id="app">
 <compo-string ref="childRef"></compo-string>
 <button type="button" @click="buttonClickFunction">親ボタン</button>
</div>

 

index.js

const { loadModule } = window['vue3-sfc-loader'];
Vue.createApp({
  setup( ){
    const childRef = Vue.ref(null);
    const buttonClickFunction = ( e ) => {
      childRef.value.fromParentFunction();
    };

    return {  buttonClickFunction, childRef }
  },
  components: {
    'compo-string': Vue.defineAsyncComponent( () => loadModule('compo_string.vue', vue3['loaderOption']() ) )
  }
}).mount('#app');

 

compo_string.vue

<template>
 <h4>{{ h4String }}</h4>
</template>

<script scoped>
export default{
  setup( ){
    const h4String = Vue.ref('Please click the button.');

    const fromParentFunction = ( e ) => {
      h4String.value = "Parent button clicked!!";
    };
    return { h4String, fromParentFunction };
  }
}
</script>

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

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