教女朋友学习 vue中的组件
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。
技术是开源的、知识是共享的。
这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。
用知识改变命运,让我们的家人过上更好的生活。
文章目录
此时是凌晨两点,我坐在电脑桌前写Bug。女朋友睡眼朦胧的跟我说 “扬帆,还不睡觉吗?你以前给我讲的vue中的 过滤器、指令、生命周期,我现在都学会了。你可以给我讲讲
组件的知识吗?”
我: “可以,正好明天休息”
一、什么是组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
二、组件的声明及使用
1. 全局组件
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName为组件名,
options为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 使用组件 --> <my-component></my-component> </div> <script> // 注册组件 Vue.component('myComponent', { template: ' <h1>Hello! 我是全局注册组件!</h1>' }) // 创建 Vue 实例 var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body> </html>
测试结果:
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
有时候由于不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册。这就有了局部注册组件!
2. 局部注册
局部组件只能在当前注册它的vue实例中使用
代码示例:
<body> <div id="app"> <my-component></my-component> </div> <template id="templ"> <h1>Hello! 我是局部注册组件</h1> </template> <script> // 创建 Vue 实例 var vm = new Vue({ el: '#app', data: {}, components: { // 定义实例内部的私有属性 myComponent: { template: '#templ' } } }) </script> </body>
测试结果:
3. 组件使用注意事项
① 组件名称如果是使用驼峰法命名,使用组件的时候要将大写字母改为小写,并且在前面加上 - ;
② 组件中的tamplate属性必须有一个唯一的根元素,否则会报错;
这个错误的意思是: 组件模板应该只包含一个根元素。应该按如下的方法来写:
三、组件的复用
有时候由于实际需要,有时候需要将组件进行任意次数的复用
代码示例:
<body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <template id="templ"> <button class="btn" @click="toClick">点击了{{count}}次</button> </template> <script> var dataObj = { count: 0 } Vue.component('button-counter', { template: '#templ', data: function () { // data 选项是一个对象 return dataObj }, methods: { toClick: function () { this.count += 1; } } }) var vm = new Vue({ el: '#app', data: {} }); </script> </body>
测试结果:
1. 遇到的问题
从测试结果可以看出,当点击一个按钮的时候,其它实例的值也会跟着改变。
原因是:data 选项是一个对象,会影响到其它实例。
2. 解决问题
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>组件复用</title> <script src="js/vue.js"></script> <style> .btn { text-align: center; color:white; background-color: green; font-size: 15px; margin-top: 10px; } </style> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <template id="templ"> <button class="btn" @click="toClick">点击了{{count}}次</button> </template> <script> Vue.component('button-counter', { template: '#templ', data: function () { // data 选项是一个函数,组件不相互影响 return { count: 0 } }, methods: { toClick: function () { this.count += 1; } } }) var vm = new Vue({ el: '#app', data: {} }); </script> </body> </html>
测试结果:
上面例子中,可以看到 button-counter 组件中的 data不是一个对象,而是一个函数。注意当点击按钮时,每个组件都会各自独立维护它的 count。因为每用一次组件,就会有一个它的新实例被创建。
这样做的好处:就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其它实例。
注意:
组件的 data 和实例的 data 不一样,
实例中的 data 可以是一个对象,但是组件中的 data 必须是一个函数。
今天就到这儿吧!下一次我再介绍 Vue父子组件传值
的问题。
由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!
扬帆向海 博客专家 原创文章 104获赞 5540访问量 158万+ 关注 私信- vue.js学习笔记(三)--父子组件通信总结
- Vue学习笔记(5)--组件化的基本使用、父子组件间的访问和传递数据
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- vue学习-组件
- Vue.js入门学习--组件的注册使用+开奖小游戏(八)
- Vue.js学习系列(八)---如何使用组件
- Vue学习笔记九:非父子组件通信
- vue学习(三) vue组件
- vue学习之父组件与子组件之间的交互
- vue学习笔记--父子组件通信
- vue学习--自定义全局vue组件
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- vue简单学习-组件
- vue学习笔记-组件篇(插槽)
- vue学习一 组件之间的数据传递
- vue学习笔记之给组件绑定原生事件操作示例
- 教女朋友学习 vue的生命周期钩子函数
- vue.js学习之组件(下篇)
- vue学习笔记-组件篇(组件之间传值)
- 【音乐App】—— Vue-music 项目学习笔记:播放器内置组件开发(一)