Vue做为组件在前端项目中的应用技巧

时间 2019-11-10

标签 vue 做为组件前端项目应用技巧繁體版

原文原文链接

为何要使用vue

由于现有的前端项目中JS在使用方面过于混乱，存在大量重复调用和代码冲突（同一段代码可能在10个不一样的地方都有写到，被触发的时候，管理异常困难），因此我认识到以前单纯依靠操做DOM的方式是有问题的，应切换到以数据为主。
因此，我考虑将前端的部分功能抽象出来使其成为通用的组件，能够在任意地方方便地被调用，而且具有可扩展性和易用性。javascript

vue的优势

1.完备的中文文档
2.容易上手
3.体积小（只有<50kb）
4.基于组件化的开发方式
5.优秀的代码可读性、可维护性

指望的实现方式

先后端代码分离，组件的vue模板代码不出如今php模板中，仅定义一个特定标签，加载特定的JS文件就能够实现组件加载，使其成为插拔式使用的组件。

经过$mount方法将vue对象挂载到某个ID的dom节点上php

// hideLogin 能够是用来控制登陆弹窗的参数之一
<div id="loginForm" data-action="homePage" data-hideLogin="1"></div>

var LoginComponent = require('loginForm.js');

var Vue = require('vue');
var loginForm = require('loginForm.vue');
var login = exports;
var form;
/**
 * 初始化登陆组件
 */
login.loadLoginForm = function () {
    if(form){
        return;
    }
    form = new Vue(loginForm);
    form.$mount('#loginForm');
};

登陆组件 + 业务调用

Vue.set() 数据传递业务回调 https://segmentfault.com/a/11...

弹窗控制组件

组件和父子组件，组件通讯，内部生命周期

pop.js前端

var Vue = require('vue');
var pop = require('pop.vue');
new Vue({
    el: '#pop',
    render: function (h) {
        return h(pop)
    }
});

pop.vue // 父组件vue

<template>
    <div>
        <div class="mask" v-show="showMask" @click="clickMask"></div>
        // 使用listenPop="closePopMsg" 来监听子组件close pop的行为
        <pop-a v-if="showA"  v-on:listenPop="closePopMsg"></pop-a> 
        // 使用 :showUrl="showUrl"  来给子组件传值 子组件须要定义 
        // props: {showUrl:showUrl}  来接受传值
        <pop-b :showUrl="showUrl" v-on:listenPop="closePopMsg"></pop-b>
    </div>
</template>

<script>
// 加载子组件
var popA = require('popA.vue');
var popB = require('popB.vue');

module.exports = {
        data: function () {
            return {
                showA: false,
                showB: false,
                showMask: false,
                showUrl : ''
                stack: [] // 定义一个栈用来存储pop顺序和流程
            }
        },
        components: {
        // 定义组件时 es6的简写语法糖是key:value一致时 不用写key
          popA:popA,
          popB:popB
        },
        methods: {
            clickMask: function () {
//                console.log('click_mask');
            },
            checkShowA: function () {
                if (!this.checkShow()) {
                    return;
                }
                this.stack.push('showA');
            },
            checkShowB: function () {
                this.stack.push('showB');
            },
            //show出pop
            tryPop: function () {
                if(this.stack.length > 0){
                    var key = this.stack.pop();
                    this[key] = true;
                    this.showMask = true;
                } else {
                    this.showMask = false;
                }
            },
            closePopMsg: function (type) {
                if (type == 1) {
                    this.tryPop()
                }
            }
        },
        created: function () {
            this.checkShowA();
            this.checkShowB();
            this.tryPop();
        }

    };
</script>

子组件（popA.vue）设置一个methods 来给父组件传值java

methods: {
            closeMsg: function (type) {
                this.$emit("listenPop", type);
            }
        }

城市选择组件

侦听器 watch：当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的
过滤器 filter

// watch方法监控该对象，当数据发生变化的时候，触发function
    watch: {
        list: function(val) {
            this.doSm();
        },
        history: function(val) {
            if(val){
                this.doSm();
            }
        }
    }

// 使用filter 来对接口返回的数据进行处理
    constructUrl: function (list) {
        var vm = this;
        return list.filter(function (item) {
            if (if (vm.type == '1') {)
            return item['url'] = 'javascript:;';
        })
    }