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:;';
        })
    }