Vue組件
組件是Vue中不可或缺的一個功能，它可以將一個頁面劃分為多個獨立的內部組件，方便代碼的管理。
定義組件
<body><div id="App"><bcomp></bcomp></div><script>const app = Vue.createApp({})const buttonComponent = {// 組件的HTML渲染模板template: `<div><button>按鈕</button></div>`}app.component('bcomp', buttonComponent) // 將Component組件綁定到應用實例中，并取別名compapp.mount('#App') // 將app應用實例綁定到id=App的HTML元素上</script>
</body>
這是一個最簡單的組件，buttonComponent的作用就是在頁面中渲染出一個按鈕。
app.component()函數可以將buttonComponent組件綁定到app實例中
渲染結果
Props選項
props定義的屬性是提供給外部進行設置使用的
定義props屬性
<body><div id="App"><bcomp button-title="按鈕1"></bcomp></div><script>const app = Vue.createApp({})const buttonComponent = {// 定義外部屬性props: ['buttonTitle'],// 組件的HTML渲染模板template: `<div><button>{{ buttonTitle }}</button></div>`}app.component('bcomp', buttonComponent) // 將Component組件綁定到應用實例中，并取別名compapp.mount('#App') // 將app應用實例綁定到id=App的HTML元素上</script>
</body>
可以看出props先從外部獲取了屬性值，然后將屬性值在組件內部進行使用。
渲染結果
$emit方法
在組件內部可以使用$emit方法來傳遞事件。
比如現在有兩個組件，子組件負責渲染按鈕的HTML界面，父組件負責按鈕的點擊事件。
子組件渲染完按鈕后，按鈕的點擊事件不是自己做而是需要傳給父組件去做，這時候就需要用到$emit方法了。
假如我們的任務是：點擊按鈕后需要在控制臺輸出一個"emit"。
$emit簡單使用
<body><div id="App"><bcomp button-title="按鈕1" @click-to-log="log"></bcomp></div><script>const app = Vue.createApp({methods: {// log函數log() {console.log('emit')}},})const buttonComponent = {// 定義外部屬性props: ['buttonTitle'],// 組件的HTML渲染模板template: `<div><button @click="$emit('clickToLog')">{{ buttonTitle }}</button></div>`}app.component('bcomp', buttonComponent) // 將Component組件綁定到應用實例中，并取別名compapp.mount('#App') // 將app應用實例綁定到id=App的HTML元素上</script>
</body>
在這里，buttonComponent組件中在按鈕渲染處定義了一個click事件，但是click事件不是自己做而是父組件做，因此它將click事件重命名為click-to-log傳遞出去(正常情況一般是@click="$emit('click')"，即不修改名稱，這里為了防止搞混專門把命名改成都不一樣的了)。
父組件app收到后看到click-to-log事件需要一個控制臺輸出函數log，于是在自己的methods中定義了一個log函數在控制臺輸出"emit"。
輸出結果
點擊按鈕后控制臺輸出結果為：
總結
本文旨在記錄我自己學習期間遇到的問題，并非教學，所以只寫了最最簡單的應用和我自己的理解，并沒有深挖其原理。
(一百三十二))
)
