vue 组件
【摘要】
什么是组件：组件是可复用的vue实例，它的特点是独立、可复用且整体化。
为什么要组件化：为了实现功能模块的复用，高执行率，便于开发单页面复杂应用。
组件化带来的问题：组件状态管理（vuex）；
多组件的混合使用，多页面，复杂逻辑（vue-router）；
组件间的传参、消息、事件处理（props，emit/on，bus）。
下面，我们来看看怎么创建组件以及...
什么是组件：组件是可复用的vue实例，它的特点是独立、可复用且整体化。
为什么要组件化：为了实现功能模块的复用，高执行率，便于开发单页面复杂应用。
组件化带来的问题：组件状态管理（vuex）；
多组件的混合使用，多页面，复杂逻辑（vue-router）；
组件间的传参、消息、事件处理（props，emit/on，bus）。
下面，我们来看看怎么创建组件以及使用组件，先注册组件：Vue.component('componentName',{data:...,template:...})，componentName是你的组件名称，data是组件的数据，切记data必须是一个函数，如果data只是一个对象，那我们在复用组件到的时候，组件和组件之间的数据是会受到彼此的影响的，template则是我们要建立的DOM模板内容。然后我们需要在哪里使用到这个组件，就把组件名当标签使用在html里就可以来，我们来看一个小栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <button-groups></button-groups> <button-groups></button-groups> <button-groups></button-groups> </div> <script> Vue.component('button-groups', { data: function() { return { count: 0 } }, template: "<div><button @click='count++'>点击了{{count}}次</button></div>" }); new Vue({ el: '.myApp' }); </script> </body> </html>
前文提到的vuex，后面的文章会单独将，它一种响应式的状态管理，很重要，需要单独来说。现在，我们看一下组件之间的通信，vue通过prop向子组件传递数据。看下下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件 props</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .myApp p { display: inline-block; width: 150px; } </style> </head> <body> <div class="myApp"> <msg-info v-bind:msg='msg'></msg-info> </div> <script> Vue.component('msg-info', { props: ['msg'], template: "<div><p>{{msg}}</p></div>" }); new Vue({ el: '.myApp', data: { msg: 'hello world!' } }); </script> </body> </html>
上面的例子中，使用props给子组件传递了一条动态的数据。那么，如果有多条数据怎么办呢？比如一篇文章，有作者有标题，有发布时间有正文的，而且我们会请求很多条文章的时候怎么渲染展示呢，看看下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .blog-groups{ background: #ffffcc; padding: 20px 50px; margin-bottom: 10px; } h1{ text-align: center; font-size: 18px; font-weight: bold; } .time{ text-align: right; } .time p { font-size: 14px; display: inline-block; margin-right: 10px; } .content p{ text-indent: 30px; } </style> </head> <body> <div class="myApp"> <blog-groups v-for="items in blogs" v-bind:items='items'></blog-groups> </div> <script> Vue.component('blog-groups', { props: ['items'], template: "<div class='blog-groups'><h1>{{items.title}}</h1><div class='time'><p>作者：{{items.autor}}</p><p>发布时间：{{items.times}}</p></div><div class='content'><p>{{items.content}}</p></div></div>" }); new Vue({ el: '.myApp', data: { blogs: [{ title: '射手座的我', autor: 'jhon', times: '2019-02-15', content: '天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧，颇富直觉、拥有鼓舞他人的力量，思想开明、适应力强，有很好的判断力，有处理紧急事务的才能，擅长哲学思考，富崇高的正义感，非常敏感而聪慧，喜爱自由、诚恳、正直、可靠、慎重。' }, { title: '狮子座的你', autor: 'lily', times: '2019-02-18', content: '人生如“秀”生活的每个角落都是舞台人生如秀，既然要秀，就要秀得漂亮，秀得痛快，秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台，他看起来好像非常爱“现”，殊不知他只是活得太认真太讲究罢了。凡有人在之处，他便无法完全松弛，藉助于表演性质的沟通方式，使他可以知悉在场的人是否相处得来，这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”，那便是他把你当自己人看，他喜欢娱乐朋友。当然啦，最重要的是，他真的很能“现”，可以从中获得人生至乐。在他秀过之后，记得给他掌声或献上玫瑰花，他会表现得很不在乎这些，他心中真正暗喜的是：“很好，没有人在我表演结束之前离席！”' }, { title: '水瓶座的他', autor: 'zaya', times: '2019-02-19', content: '水瓶座人无法让别人一厢情愿地爱着他，他更不可能一厢情愿地缠着别人。当他吸引你时，你最好不要太快表现出你对他的好感或好奇，更千万保留你对他的赞美之词，因为万一你并不吸引他，他会觉得你对他的评价不值采信。' }] } }); </script> </body> </html>
如果我们需要给子组件添加事件，达到父子组件进行沟通的效果，应该怎么来实现呢，这就需要用到$emit 方法，这个方法第一个传入一个事件名称，这个事件名称，我们能在父组件获取并控制，后面还何以传入其他参数，具体使用方法，可以看下官方文档哈，我这里没用就不说了。下面说个例子，我们在看小说的时候，有时候会用到放大字体或者缩小字体的功能，这里我们就通过给子组件添加两个按钮来实现一下这个功能：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .blog-groups{ background: #ffffcc; padding: 20px 50px; margin-bottom: 10px; } h1{ text-align: center; font-weight: bold; } .time{ text-align: right; } .time p { display: inline-block; margin-right: 10px; } .time span{ display: inline-block; background: pink; border-radius: 5px; padding: 2px 5px; margin: 0 5px; cursor: pointer; } .content p{ text-indent: 30px; } </style> </head> <body> <div class="myApp" :style="{ fontSize: postFontSize + 'px' }"> <blog-groups v-for="items in blogs" v-bind:items='items' v-on:enlarge-text="postFontSize += 1" v-on:reduce-text="postFontSize -= 1"></blog-groups> </div> <script> Vue.component('blog-groups', { methods:{ bigFontSize(){ this.$emit('enlarge-text'); }, reduceFontSize(){ this.$emit('reduce-text'); }, }, props: ['items'], template: "<div class='blog-groups'><h1>{{items.title}}</h1><div class='time'><p>作者：{{items.autor}}</p><p>发布时间：{{items.times}}<span v-on:click='bigFontSize'>放大字体</span><span v-on:click='reduceFontSize'>缩小字体</span></p></div><div class='content'><p>{{items.content}}</p></div></div>" }); new Vue({ el: '.myApp', data: { blogs: [{ title: '射手座的我', autor: 'jhon', times: '2019-02-15', content: '天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧，颇富直觉、拥有鼓舞他人的力量，思想开明、适应力强，有很好的判断力，有处理紧急事务的才能，擅长哲学思考，富崇高的正义感，非常敏感而聪慧，喜爱自由、诚恳、正直、可靠、慎重。' }, { title: '狮子座的你', autor: 'lily', times: '2019-02-18', content: '人生如“秀”生活的每个角落都是舞台人生如秀，既然要秀，就要秀得漂亮，秀得痛快，秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台，他看起来好像非常爱“现”，殊不知他只是活得太认真太讲究罢了。凡有人在之处，他便无法完全松弛，藉助于表演性质的沟通方式，使他可以知悉在场的人是否相处得来，这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”，那便是他把你当自己人看，他喜欢娱乐朋友。当然啦，最重要的是，他真的很能“现”，可以从中获得人生至乐。在他秀过之后，记得给他掌声或献上玫瑰花，他会表现得很不在乎这些，他心中真正暗喜的是：“很好，没有人在我表演结束之前离席！”' }, { title: '水瓶座的他', autor: 'zaya', times: '2019-02-19', content: '水瓶座人无法让别人一厢情愿地爱着他，他更不可能一厢情愿地缠着别人。当他吸引你时，你最好不要太快表现出你对他的好感或好奇，更千万保留你对他的赞美之词，因为万一你并不吸引他，他会觉得你对他的评价不值采信。' }], postFontSize: 14 } }); </script> </body> </html>
除了上面我们说到的知识点，组件还有其他的知识点，我这里就先不说了，以后用到再补充吧，上面是组件基本的使用方法。
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/10401497.html
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）