脚本宝典收集整理的这篇文章主要介绍了Vue作为组件在前端项目中的应用技巧，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
因为现有的前端项目中JS在使用方面过于混乱，存在大量重复调用和代码冲突（同一段代码可能在10个不同的地方都有写到，被触发的时候，管理异常困难），所以我认识到之前单纯依靠操作DOM的方式是有问题的，应切换到以数据为主。
所以，我考虑将前端的部分功能抽象出来使其成为通用的组件，可以在任意地方方便地被调用，并且具备可扩展性和易用性。
通过$mount方法将vue对象挂载到某个ID的dom节点上
// 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');
};pop.js
var Vue = require('vue');
var pop = require('pop.vue');
new Vue({
el: '#pop',
render: function (h) {
return h(pop)
}
});pop.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 来给父组件传值
methods: {
closeMsg: function (type) {
this.$emit("listenPop", type);
}
}// 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:;';
})
}以上是脚本宝典为你收集整理的Vue作为组件在前端项目中的应用技巧全部内容，希望文章能够帮你解决Vue作为组件在前端项目中的应用技巧所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。