[Vue warn] Failed to resolve component xxx

bug内容：

原文：

[Vue warn]: Failed to resolve component: test

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

at

必應翻譯：

未能解決元件：測試

如果這是一個本地自定義元素，請務必通過編譯器從元件分辨率中排除它。

原因預讀：

邏輯問題：父元件都已經挂載上了，子元件就沒法加載上父元件了！！！

解決步驟：

//定義父元件
const app = Vue.createApp({
            data() {
                return {
                    num: 123,
                }
            },
            template: `
            <test  :content="num" />
            `,
        })
//父元件挂載
        const vm = app.mount('#root');

//子元件傳值
        app.component('test',{
            // 傳值載體
            props:{
                // 對傳入的content進行校驗
                content:{
                    type:Number,   // 淺校驗
                    request:true,   // 是否必傳
                    default:123,   // 預設值
                    default:function(){
                        return 123;
                    },
                    // 深校驗
                    validator:function(value){
                        return value<1000;
                    },
                }
            },
            template:`{{content}}`,
        })
           

代碼原文解釋：

1、定義父元件部分

2、父元件挂載

3、子元件編寫

解決步驟：

從bug方向出發

—>子元件有問題

—>檢查子元件：子元件無文法格式拼寫問題

—>測試子元件内部：分段注釋測試代碼，發現bug不變

—>父元件沒引用上？

—>檢查父元件：父元件無文法格式拼寫問題

—>分析書寫邏輯：父元件建立–》父元件挂載–》子元件傳給父元件

邏輯問題：父元件都已經挂載上了，子元件就沒法加載上父元件了！！！

—》解決方案： --》父元件建立 app = Vue.createApp

–》子元件傳給父元件app.component(‘test’,{}）

–》父元件挂載 app.mount()

等所有元件都已經互相連接配接了，才能挂載