组件 · 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 这种工具那就可以忽略官方这个注意事项可以使用驼峰形式使用组件