組件 · vue3.x -- 系列學習

>[success] # 組件解決思路 1. 將一個頁面中**所有的處理邏輯全部放在一起**，處理起來就**會變得非常復雜**，而且**不利于后續的管理以及擴展**，如果一個頁面拆分成**一個個小的功能塊**，每個功能塊完成屬于自己這部分**獨立的功能**，那么之后整個頁面的**管理和維護就變得容易了** * **完整的頁面分成很多個組件** * **每個組件**都用于**實現頁面的一個功能塊** * 每一個組件又可以進行細分 * 組件本身又可以在多個地方**進行復用** 2. 組件允許我們將 UI 劃分為獨立的、可重用的部分，并且可以對每個部分進行單獨的思考。在實際應用中，組件常常被組織成層層嵌套的樹狀結構 ![](https://img.kancloud.cn/e5/c0/e5c097978d3d52cde879d028af145ec8_750x263.png) >[info] ## 在vue 中使用組件 1. vue 中組件分為兩種分別是**全局組件** 和 **局部組件** * **全局組件**在任何其他的組件中都可以使用的組件；全局組件往往是在應用程序一開始就會全局組件完成，那么就意味著如果某些組件我們并沒有用到，也會一起被注冊 * **局部組件**只有在注冊的組件中才能使用的組件,局部注冊是在我們需要使用到的組件中，通過`components`屬性選項來進行注冊 >[danger] ##### 根組件 ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <h2>{{message}}</h2> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 1.組件: App組件(根組件) const App = { data() { return { message: 'Hello Vue', } }, } // 1.創建app const app = Vue.createApp(App) // 2.掛載app app.mount('#app') </script> </body> </html> ~~~ >[success] # 組件解決思路 1. 將一個頁面中**所有的處理邏輯全部放在一起**，處理起來就**會變得非常復雜**，而且**不利于后續的管理以及擴展**，如果一個頁面拆分成**一個個小的功能塊**，每個功能塊完成屬于自己這部分**獨立的功能**，那么之后整個頁面的**管理和維護就變得容易了** * **完整的頁面分成很多個組件** * **每個組件**都用于**實現頁面的一個功能塊** * 每一個組件又可以進行細分 * 組件本身又可以在多個地方**進行復用** 2. 組件允許我們將 UI 劃分為獨立的、可重用的部分，并且可以對每個部分進行單獨的思考。在實際應用中，組件常常被組織成層層嵌套的樹狀結構 ![](https://img.kancloud.cn/e5/c0/e5c097978d3d52cde879d028af145ec8_750x263.png) >[info] ## 在vue 中使用組件 1. vue 中組件分為兩種分別是**全局組件** 和 **局部組件** * **全局組件**在任何其他的組件中都可以使用的組件；全局組件往往是在應用程序一開始就會全局組件完成，那么就意味著如果某些組件我們并沒有用到，也會一起被注冊 * **局部組件**只有在注冊的組件中才能使用的組件,局部注冊是在我們需要使用到的組件中，通過`components`屬性選項來進行注冊 >[danger] ##### 根組件 ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <h2>{{message}}</h2> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 1.組件: App組件(根組件) const App = { data() { return { message: 'Hello Vue', } }, } // 1.創建app const app = Vue.createApp(App) // 2.掛載app app.mount('#app') </script> </body> </html> ~~~ >[danger] ##### 定義一個全局組件 ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .product { background-color: orange; } </style> </head> <body> <div id="app">  <product-item></product-item>  <product-item></product-item>  <product-item></product-item> </div>  <template id="item"> <div class="product"> <h2>{{title}}</h2> <p>商品描述, 限時折扣, 趕緊搶購</p> <p>價格: {{price}}</p> <button @click="favarItem">收藏</button> </div> </template> <script src="https://unpkg.com/vue@next"></script> <script> /* 1.通過app.component(組件名稱, 組件的對象) 2.在App組件的模板中, 可以直接使用product-item的組件 */ // 1.組件: App組件(根組件) const App = {} // 2.創建app const app = Vue.createApp(App) // 3.注冊一個全局組件 // product-item全局組件 app.component('product-item', { template: '#item', // 也可以這么編寫 // template: ` <div class="product"> // <h2>我是商品</h2> // <div>商品圖片</div> // <div>商品價格: <span>￥9.9</span></div> // <p>商品描述信息, 9.9秒殺</p> // </div>`, data() { return { title: '我是商品Item', price: 9.9, } }, methods: { favarItem() { console.log('收藏了當前的item') }, }, }) // 2.掛載app app.mount('#app') </script> </body> </html> ~~~ >[danger] ##### 局部組件 ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .product { background-color: orange; } </style> </head> <body> <div id="app"> <home-nav></home-nav>  <product-item></product-item> <product-item></product-item> <product-item></product-item> </div> <template id="product"> <div class="product"> <h2>{{title}}</h2> <p>商品描述, 限時折扣, 趕緊搶購</p> <p>價格: {{price}}</p> <button>收藏</button> </div> </template> <template id="nav"> <div>-------------------- nav start ---------------</div> <h1>我是home-nav的組件</h1> <product-item></product-item> <div>-------------------- nav end ---------------</div> </template> <script src="https://unpkg.com/vue@next"></script> <script> // 1.創建app const ProductItem = { template: '#product', data() { return { title: '我是product的title', price: 9.9, } }, } // 1.1.組件打算在哪里被使用 const app = Vue.createApp({ // components: option api components: { HomeNav: { template: '#nav', components: { ProductItem, }, }, }, // data: option api data() { return { message: 'Hello Vue', } }, }) // 2.掛載app app.mount('#app') </script> </body> </html> ~~~ >[info] ## 組件注意事項 1. 在通過`app.component`注冊一個組件的時候，第一個參數是組件的名稱，定義組件名的方式有兩種 * 使用`kebab-case`（短橫線分割符）`<my-component-name>` * 使用`PascalCase`（駝峰標識符）使用時候可以`<my-component-name>` 和 `<MyComponentName>` 以上要注意的是官網有一句話`HTML `標簽和屬性名稱是不分大小寫的，所以瀏覽器會把任何大寫的字符解釋為小寫。這意味著當你使用 DOM 內的模板時，無論是 PascalCase 形式的組件名稱、camelCase 形式的 prop 名稱還是 v-on 的事件名稱，都需要轉換為相應等價的 kebab-case (短橫線連字符) 形式但是如果你使用的是 vite webpack cli 這種工具那就可以忽略官方這個注意事項可以使用駝峰形式使用組件