课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：3-1 组件的定义及复用性，局部组件和全局组件（1），3-2 组件的定义及复用性，局部组件和全局组件（2）
主讲老师：Dell
课程内容：
今天学习的内容包括： 组件的定义及复用性，局部组件和全局组件
知识点：
1. 组件具备复用性
2. 全局组件：即使不用时也会挂载在 app 上，可以全局调用。虽然性能不高，但是使用简单
3. 全局组件取名建议： 小写字母单词，多个字母中间用横线分隔例如 hello-world
4. 局部组件： 定义了，要在 Vue.createApp({}) 中用 components{} 注册才能使用，性能比较高，使用起来有些麻烦
5. 局部组件取名建议：驼峰式命名；例如 HelloWorld。单个单词首字母大写，以便区分局部组件和普通常量
6. 局部组件使用时，要做一个名字和组件间的映射对象，如果组件用的名字和定义的名子相同，不做映射，Vue 底层也会自动做映射示例代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script> // 组件的定义 // 组件具备复用性 // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔 // 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名 // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射 const Counter = { data() { return { count: 1 } }, template: `<div @click="count += 1">{{count}}</div>` } const HelloWorld = { template: `<div>hello world</div>` } const app = Vue.createApp({ components: { // counter: Counter, // 'hello-world': HelloWorld, Counter, HelloWorld, }, template: ` <div><hello-world /><counter /></div> ` }); // app.component('counter-parent', { // template: `<counter />` // }) // app.component('counter', { // data() { // return { // count: 1 // } // }, // template: `<div @click="count += 1">{{count}}</div>` // }) const vm = app.mount('#root'); </script> |
课程收获：
今天第三章学了快一半，这里选取的是今天学习的前两节知识点。Vue 的组件是很重要的一个的概念，本章大部分内容需要多看多练，熟能生巧。
今日课程学习时间大约花费 18 分钟。