オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

<スクリプト>
エクスポートデフォルト{
    名前: '人'、
    小道具: {
        名前： {
            タイプ: 文字列、
            必須: false、
            デフォルト: '匿名'
        },
        年： {
            タイプ: 数値、
            必須: false、
            デフォルト: 0
        },
        国：
            タイプ: 文字列、
            必須: false、
            デフォルト: '地球人'
        }
    },
    メソッド: {
        食べる（） {
            consloe.log('食べる')
        },
        寝る（） {
            console.log('スリープ')
        },
        走る（） {
            console.log('実行中')
        }
    }
}
</スクリプト>

<person :age="20" :name="'シャオミン'" :country="'中国語'"></person>

<テンプレート>
    ...
    <button @click="handleClick">クリック</button>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: '人'、
    メソッド: {
        ハンドルクリック() {
            this.$emit('getPerson', {
                年齢: this.age,
                名前: this.name,
                国: this.country
            })
        }
    }
}
</スクリプト>

<テンプレート>
    <div>
        <person :age="20" :name="'シャオミン'" :country="'中国語'" @getPerson="getPerson"></person>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: 'テスト',
    メソッド: {
        getPerson(情報) {
            console.log(情報)
        }
    }
}
</スクリプト>

<テンプレート>
    <表示
        :style="{ 幅: 幅、高さ: 高さ }"
        :class="['owl-tag-' + タイプ]"
        クラス="owl-tag text-xs flex align-center justify-center"
    >
        <スロット></スロット>
    </ビュー>
</テンプレート>

<スクリプト>
    名前: 'owl-tag',
    小道具: {
        // 渡すことができる有効な値は primary | gray です
        タイプ： {
            タイプ: 文字列、
            デフォルト: 'プライマリ'
        },
        幅： {
            タイプ: 文字列、
            必須: false
        },
        身長：
            タイプ: 文字列、
            必須: false
        }
    }
</スクリプト>

<スタイル>
.owlタグ{
    境界線の半径: 8rpx;
    パディング: 6rpx 10rpx;
}

.owl-tag-primary {
    色: 白;
    背景色: #87cefa;
}

.owl-tag-gray {
    色: #81868a;
    背景色: #f0f1f5;
}
</スタイル>

<テンプレート>
    <フクロウタグ
        :type="'プライマリ'"
        :height="'45rpx'"
        :width="'120rpx'"
    >
        公式投稿</owl-tag>
</テンプレート>