vue组件的一个总结

用vue进行开发到目前为止也有将近一年的时间了，在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架。虽然两者思想上的差异不大，但是vue的语法在代码的可读性以及后期的维护成本更加的适合，而且最近看到Apache对react的相关许可限制；这里不讨论react和vue的对比哪个好，技术框架没有最好的，只有适合项目才是最好的。

进入主题。。。。。。。

组件，是vue的核心之一。

我们可以把页面各个子模块看成一个组件，可以独立拆分出来。这样不仅维护变得简单了，而且代码复用性也高。

vue组件分为全局组件和局部组件。组件中属性和vue实例基本类似，基本可以使用其所有属性如computed，methods，components，filter，directive.....但data属性不同，在组件中data是函数，而且数据需要return出来；因为组件可能会被引用多次，就会创建多次实例，如果data是个对象的话那引用到这个组件的地方都将公用一个data这样就回造成了数据的污染。如果使用data属性函数返回一个对象的话就可以解决这个问题，每次引入到这个组件实例的时候就可以在data函数中返回一个初始的数据对象。

组件的介绍

全局组件

使用Vue.component进行全局注册，所有vue实例都会共享此组件

 1 　　<div >
 2         {{msg}}
 3         <const-comp></const-comp>
 4     
 5     </div>
 6     <script>
 7         
 8         Vue.component('constComp', {
 9             template: "<h3>我是全局组件</h3>"
10 
11         });
12 
13         new Vue({
14             el: "#app",
15             data: {
16                 msg: "hello component"
17             }
18         });
19 
20     </script>

局部组件

局部组件只能在引入当前的vue实例中有效，在当前vue实例中components属性加上引入进来的组件实例即可

    <div >
        {{msg}}
        <!-- <const-comp></const-comp> -->
        <local-comp></local-comp>
    </div>
    <script>
        
        /*Vue.component('constComp', {
            template: "<h3>我是全局组件</h3>"

        });*/
        let localComp = {
            template: "<div>我是局部组件</div>"
        };
        new Vue({
            el: "#app",
            data: {
                msg: "hello component"
            },
            components: {
                localComp
            }
        });

    </script>

单文件组件(xxx.vue)

其实就是将写在js中的组件提出到一个vue文件中写而已，这样组件更加的好维护以及阅读性也会好，提取出来了相应的引入即可，不会显得文件很多行很长。

其主要有<template></template><script></script><style></style>这三个标签，每个标签做自己的事。template就像我们在html中写dom，script写js代码当前的组件实例，style写组件样式，注意：加上scoped即可使当前样式只在当前组件生效，组件渲染的时候此组件的dom会加上data-v-xxx属性来选择当前组件样式。如果没加上scoped的话当前组件的样式就会在引入这个组件的实例中造成影响

如我写的一个found.vue文件demo

 1 <template>
 2     <div>
 3         <div class="saerchDiv">
 4             <Search
 5             @result-click="resultClick"
 6             @on-change="changeResult"
 7             :results="results"
 8             v-model="searchVal"
 9             position="absolute"
10             auto-scroll-to-top
11             top="46px"
12             @on-focus="onFocus"
13             @on-cancel="onCancel"
14             @on-submit="onSubmit"
15              ref="search"></Search>
16         </div>
17 
18     </div>
19 </template>
20 <script>
21 import {Search} from 'vux';
22 
23 export default {
24     name:"found",
25     data() {
26         return {
27             msg:"found page",
28             // searchVal:"寻找更多好文章",
29             searchVal:"",
30             results:[]
31         }
32     },
33     components:{
34         Search
35     },
36     methods:{
37         resultClick(item) { //选中搜索
38             console.log(item.title);
39         },
40         changeResult(val) { //获取搜索关键字
41             console.log(val);
42             /*this.$http.get('').then(res => {
43 
44             }).catch(err => {
45 
46             });*/
47 
48             this.results = this.getResults(val);
49         },
50         onFocus(){
51             console.log("on focus");
52             // this.searchVal = ""
53         },
54         onCancel(){
55             console.log("点击取消按钮");
56         },
57         onSubmit(){
58             console.log("on submit");
59         },
60         getResults(keyword) { //暂时获取假数据
61             let rsArr = [];
62             for(let i = 0; i < 6; i++) {
63                 rsArr.push({
64                     title:keyword + (i+1),
65                     other:i //文章id
66                 });
67             }
68             return rsArr;
69         }
70 
71     }
72 }
73 </script>
74 <style scoped>
75 
76     .saerchDiv {
77         height: .75rem;
78         font-size: .27rem;
79     }
80 
81 </style>

View Code