前提
「これから始めるVue.js3実践入門」p158をローカル登録に変更したい。
実現したいこと
ローカル登録を利用する
コンポーネント間の値の受け渡し
provide/injectを利用してVue 3実践入門を表示したい。
発生している問題・エラーメッセージ
[Vue warn]: Failed to resolve component: my-my If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. (4) " " " at <MyParent>" " " " at <App>"
該当のソースコード
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Vue.js</title> </head> <body> <div id="app"> <my-parent /> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script> <script src="provide.js"></script> </body> </html>
javascript
const MyParent={ provide:{ title:'Vue 3実践入門' }, template: `<div id="parent"> <my-my /> </div>` }; const MyMy={ components:{ 'my-parent':MyParent }, template:`<div id="my"> <my-child /> </div>` }; const MyChild={ components:{ 'my-parent':MyParent, 'my-my':MyMy }, inject:['title'], template:`<div id="child"> {{title}} </div>` }; Vue.createApp({ components:{ 'my-parent':MyParent, 'my-my':MyMy, 'my-child':MyChild } }) .mount('#app');
試したこと
javascriptを本のものに変更したら正しく実行されたので、javascriptが間違っていると思います。
補足情報（FW/ツールのバージョンなど）
Vue3.2.29
0 コメント