Vue组件 不念不忘少年蓝@ 2023-09-28 18:23 5阅读 0赞 ## 1.组件简介 ## **组件:** Vue最强大的功能之一,其作用如下图: ![3ca042bad54148c19e683372b862deb9.png][] ![48385fafcecc4d889df57a3ccf1538e7.png][] ![4f1475b41c244c4d88858a53856d33c0.png][] * **模块:** 向外提供特定功能的 js 程序,一般就是一个 js 文件。 作用:复用 js,简化 js 的编写,提高 js 运行效率。 * **组件:** 用来实现局部功能的代码和资源的集合(html/css/js/image…)。 作用:复用编码,简化项目编码,提高运行效率。 * **模块化:** 当应用中的 js 都以模块来编写的,那这个应用就是一个模块化的应用。 * **组件化:** 当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。 ## 2.非单文件组件 ## ### 1.组件的基本使用 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件案例1</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="root" :style="{width: '100%',height: `${height}px`}"> <button @click='chgView'>{ {nameP}}</button> <!-- 3)使用子组件 --> <demo1 v-if='viewD'></demo1> </div> </body> <script> /* 1)创建子组件demo1 */ const demo1 = Vue.extend({ template:` <div class="demo1"> <h1>{ {nameD}}</h1> </div> `, data() { return { nameD: '这里是子组件', } } }) /* 2)注册组件——全局注册 */ Vue.component('demo1', demo1) const vm = new Vue({ el: '#root', /* 2)注册组件——局部注册*/ /* components: { // 也可以这样写 Demo1:demm1,Demo1是组件别名,上面的标签也要改成Demo1 demo1, }, */ data () { return { nameP:'点击显示/隐藏子组件', height: document.documentElement.clientHeight, viewD: false } }, methods: { chgView() { this.viewD = !this.viewD; } }, }) </script> </html> ![af0d2b4ca5bf4a0f9b2644c47099f710.png][] ![654f42307197450f8ae13ec0c6e1e441.png][] ### 2.小结一 ### **小结:** * Vue中使用组件的三大步骤: * * 定义组件(创建组件) * * * 使用 `Vue.extend(options)` 创建,其中 `options` 和 `new Vue(options)` 时传入的 `options` 几乎一样,但也有点区别: * * * * 不用写`el`,因为最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器 * * * * `data` 必须写成函数,避免组件被复用时,数据存在引用关系 * * 注册组件 * * * 局部注册:`new Vue` 的时候传入 `components` 选项 * * * 全局注册:`Vue.component('组件名',组件)` * * 使用组件(写组件标签) * * * `<demo1 v-if='viewD'></demo1>` **注意事项:** * 组件名规范: * * 单个单词:首字母可以大写,也可以小写 * * 多个单词:kebab-case命名,CamelCase命名(需要Vue脚手架支持) * * 别使用HTML已有的元素名 * 组件标签: * * 写法:`<demo1></demo1>`、`<demo1/>` 不使用脚手架时,`<demo1/>` 会导致后续组件不能渲染 * 创建子组件的简写:`const demo1 = Vue.extend(options)` → `const demo1 = options` ### 3.组件的嵌套 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件嵌套</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="root" :style="{width: '100%',height: `${height}px`}"> <button @click='chgView'>{ {nameP}}</button> <!-- 使用子组件 --> <app v-if='viewD'></app> </div> </body> <script> const demo1_1 = Vue.extend({ template:` <div class="demo1_1"> <h3>{ {nameD}}</h3> </div> `, data() { return { nameD: '这里是子组件demo1_1', } } }) const demo1 = Vue.extend({ template:` <div class="demo1"> <h2>{ {nameD}}</h2> <button @click='chgViewD1'>点击显示/隐藏子组件</button> <demo1_1 v-if='viewD1'></demo1_1> </div> `, data() { return { nameD: '这里是子组件demo1', viewD1: false, } }, methods: { chgViewD1() { this.viewD1 = !this.viewD1 } }, components: { demo1_1, } }) const demo2 = Vue.extend({ template:` <div class="demo2"> <h2>{ {nameD}}</h2> </div> `, data() { return { nameD: '这里是子组件demo2', } } }) const demo3 = Vue.extend({ template:` <div class="demo3"> <h2>{ {nameD}}</h2> </div> `, data() { return { nameD: '这里是子组件demo3', } } }) const app = Vue.extend({ template:` <div> <demo1></demo1> <demo2></demo2> <demo3></demo3> </div> `, components: { demo1, demo2, demo3, } }) const vm = new Vue({ el: '#root', /* 注册组件——局部注册*/ components: { app, }, data () { return { nameP:'点击显示/隐藏子组件', height: document.documentElement.clientHeight, viewD: false } }, methods: { chgView() { this.viewD = !this.viewD; } }, }) </script> </html> ![5de27742ec4149eeb5f7d6ed83587aad.png][] ### 4.小结二 ### ![15ccf5f939014e4bae54fa4977c448c3.png][] **组件的嵌套:** 就是把一个子组件A注册到另一个子组件B里面。 * 注意: * * 子组件A需要定义在子组件B之前 * * 子组件A只能在子组件B的标签内使用 * 在实际开发中,通常使用一个最外部的子组件(一般被叫做 app)来统一管理其他组件 ![a247b39895134f98ba85a3c10cf7dd33.png][] 注意:可以不在body中使用app标签,可以直接写在vm中: template:` <app></app> `, ### 5.VueComponent ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueComponent</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="root" :style="{width: '100%',height: '100%'}"> </div> </body> <script> const demo1 = Vue.extend({ template:` <div class="demo1"> <h1>{ {nameD}}</h1> </div> `, data() { return { nameD: '这里是子组件', } } }) console.log(demo1) const vm = new Vue({ template:` <demo1/> `, el: '#root', components: { demo1, }, }) </script> </html> ![8f490bdd2b4e47e4993dc2acc4becd08.png][] **VueComponent:** * demo1组建的本质是一个名为`VueComponent`的构造函数,且不是程序员定义的,是`Vue.extend`生成的 * 使用子组件的标签`<demo1></demo1>`、`</demo1>`,Vue解析时会帮我们创建demo1组件的实例对象,即Vue帮我们执行的:new VueComponent(options) * 每次调用`Vue.extend`,返回的都是一个**全新的`VueComponent`**! 注意:对于同一个组件,多次使用其标签,只会调用一次对应的`Vue.extend`,即,同一组件只会返回一个`VueComponent` * 关于this指向: * * 组件配置中:`data`函数、`methods`中的函数、`watch`中的函数、`computed`中的函数 它们的this均是**VueComponent实例对象** * * `new Vue(options)`配置中:`data`函数、`methods`中的函数、`watch`中的函数、`computed`中的函数 它们的this均是**Vue实例对象** ### 6.一个重要的内置关系 ### 不明白`prototype`和`_proto_`关系的可以看这篇文章:[prototype和\_\_proto\_\_][prototype_proto] * `prototype` 是函数才有的属性 * `__proto__` 是每个对象都有的属性 * 大多数情况: `__proto__` 可以理解为“构造器的原型”,即`__proto__=== constructor.prototype` **一个重要的内置关系:** `VueComponent.prototype._proto_ === Vue.prototype` ![91b9f43e2ca44fbf87073c7d5f0abaa4.png][] ## 3.单文件组件 ## ### 1.对外暴露组件的写法 ### 不明白 es6模块化 的可以看这篇文章:[一篇文章帮你弄懂ES6模块化][ES6] **暴露组件的写法:** <script> /* 交互代码 export 暴露接口 此处是分别暴露 import {xxx} from xxxx */ export const demo1 = Vue.extend({ data() { }, methods: { } }) /* 统一暴露 import {xxx} from xxxx */ // export {demo1} /* 默认暴露 一般都用默认暴露——import xxx from xxxx */ // export default demo1 </script> 默认暴露的另一写法: export default Vue.extend({ data() { }, methods: { } }) 默认暴露最常用的写法: export default { // 这里最好写一个name,最好与文件名一致 name:'Demo1', data() { }, methods: { } } ### 2.单文件组件结构 ### **组件部分:** xxx.vue * `template` div容器部分(唯一根节点,必须部分) * `script` Vue实例部分 * * `export default` 暴露组件(默认暴露) * * `import xxxfrom './xxx.vue'` 引入组件并使用 * * `components` 注册组件 * `style` 容器样式部分 **组件注册部分:** mian.js import xxxfrom './xxx.vue' new Vue({ //template:`<App></App>`, 这里写了,就不用在index.html中写标签 el:'#root', components:{ App} }) **容器部分:** index.html * 所有组件标签都是在这里被使用,并显示在页面上 <script src="../js/vue.js"></script> <script src="./main.js"></script> 单文件组件剩余部分需要用到脚手架,下一章再见。 ![bdafbcc39c8c47d9894ce2206c822037.png][] [3ca042bad54148c19e683372b862deb9.png]: https://img-blog.csdnimg.cn/3ca042bad54148c19e683372b862deb9.png [48385fafcecc4d889df57a3ccf1538e7.png]: https://img-blog.csdnimg.cn/48385fafcecc4d889df57a3ccf1538e7.png [4f1475b41c244c4d88858a53856d33c0.png]: https://img-blog.csdnimg.cn/4f1475b41c244c4d88858a53856d33c0.png [af0d2b4ca5bf4a0f9b2644c47099f710.png]: https://img-blog.csdnimg.cn/af0d2b4ca5bf4a0f9b2644c47099f710.png [654f42307197450f8ae13ec0c6e1e441.png]: https://img-blog.csdnimg.cn/654f42307197450f8ae13ec0c6e1e441.png [5de27742ec4149eeb5f7d6ed83587aad.png]: https://img-blog.csdnimg.cn/5de27742ec4149eeb5f7d6ed83587aad.png [15ccf5f939014e4bae54fa4977c448c3.png]: https://img-blog.csdnimg.cn/15ccf5f939014e4bae54fa4977c448c3.png [a247b39895134f98ba85a3c10cf7dd33.png]: https://img-blog.csdnimg.cn/a247b39895134f98ba85a3c10cf7dd33.png [8f490bdd2b4e47e4993dc2acc4becd08.png]: https://img-blog.csdnimg.cn/8f490bdd2b4e47e4993dc2acc4becd08.png [prototype_proto]: https://www.jianshu.com/p/3d756c5bba16 [91b9f43e2ca44fbf87073c7d5f0abaa4.png]: https://img-blog.csdnimg.cn/91b9f43e2ca44fbf87073c7d5f0abaa4.png [ES6]: https://juejin.cn/post/6844904003722018830 [bdafbcc39c8c47d9894ce2206c822037.png]: https://img-blog.csdnimg.cn/bdafbcc39c8c47d9894ce2206c822037.png
相关 Vue 组件 首先,我们还是先创建一个vue实例,很熟练了,没难度。 <div id="app"></div> <script> let vm = 落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 389 阅读
相关 vue组件 全局组件 <!-- 全局组件定义 --> Vue.component('todo-list',{ template:"<li>{ 左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 367 阅读
相关 vue组件 定义全局组件的三种方式 方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词,不是实例对象--> <m 落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 406 阅读
相关 VUE组件 介绍几种VUE组件定义方法 定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属 ゞ 浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 389 阅读
相关 VUE组件 VUE Component 一、概述 1. 作用 扩展HTML元素,封装可重用的代码。在需要使用的地方引用组件。 二、VUE前情回顾 使用: 1. 雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 381 阅读
相关 vue组件 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对 系统管理员/ 2022年01月28日 08:43/ 0 赞/ 440 阅读
相关 vue组件 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件 本是古典 何须时尚/ 2022年01月05日 07:25/ 0 赞/ 434 阅读
相关 Vue组件 一、介绍 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 「爱情、让人受尽委屈。」/ 2021年10月23日 14:50/ 0 赞/ 512 阅读
相关 Vue组件 为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性,让代码可以复用。 组件的用法 组件在使用前先需要注册。注册分为两种方式:全局注册和局 叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 481 阅读
相关 Vue组件 Vue组件 1. 什么是组件 1. 组件的概念:组件即自定义控件,是Vue.js最强大的功能之一 2. 组件的用途:组件能够封装可重用代码,扩展html标签功能 ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 676 阅读
还没有评论,来说两句吧...