Vue.component用法

当我们有一个共有功能时，在每个JS中都进行方法、属性的定义，代码就会十分冗余。此时我们可以使用vue.component。
将共有功能作为一个组件，在不同的html页面中直接传参调用即可。

例：

组件JS

(function(){
    
	var template = '<div style="display: inline-block">\n' +
        '<i class="iconfont iconlujing1" @click="relevanceData()" style="color: #00a0ee;cursor: pointer"></i>\n' +
        '<el-dialog\n' +
        'class="yyzwb el-dialog__header el-dialog__title"\n' +
        'title="关联指标"\n' +
        ':visible.sync="dialogVisible"\n' +
        ' width="30%">\n' +
        '<div v-if="dataList.length == 0">暂无数据</div>\n' +
        '<div v-for="(data,index) in dataList">\n' +
        '<div :style="{\'padding-top\': index==0 ? \'4px\' : \'24px\'}">\n' +
        '<div style="position: relative">\n' +
        '<div style="float:left; display:inline-block;height: 13px;width: 13px;border-radius: 50%;background: #349afb;position: absolute;top: 5px"></div>\n' +
        '<span style="font-weight: bolder;padding-left: 20px">{{data.gcd}}</span>\n' +
        '</div>\n' +
        '<div style="padding-bottom: 24px;">{{data.pfyd}}</div>\n' +
        '<div v-if="index != dataList.length -1" style="height: 0px;border: 1px solid #eeeeee;"></div>\n' +
        '</div>\n' +
        '</div>\n' +
        '<span class="dialog-footer"></span>\n' +
        '</el-dialog>\n' +
        ' </div>';

	// 'relevance':组件名称，页面通过该名称使用组件
	Vue.component('relevance', {
	    //template:使用组件时拼接的页面代码
		template: template,
        //props:页面传入的参数
		props: {
		    //页面传入参数名称，注：页面大小写使用‘-’分割 module-name
            moduleName:{
            	type:String,
                required:true
			}
		},

        //data
		data:function(){
			return {
                dialogVisible:false,		//是否显示弹框
				dataList:[]					//存放返回数据
			}
		},
        
        //方法
		methods: {
			//初始化加载
			init:function () {
				this.getRelevanceData();
            },

			//根据模块名称获取关联指标
            getRelevanceData:function () {
                var _this = this;
                $.ajax({
                    xhrFields: {
                        withCredentials: true
                    },
                    type: "POST",
                    async: false,
                    url: httpurl + 'templateManage/getRelevanceData',
                    data: {
						DM:this.moduleName
					},
                    dataType: "json",
                    success: function (data) {
                        if ("success" == data.result) {
                            _this.dataList = data.list
                       		console.log( _this.list);
                        }

                    }
                })
            },

			//显示弹框
            relevanceData:function () {
				this.dialogVisible = true
            }
		},

		mounted(){
			this.init();
		}

	})
})();

在页面引入该JS

注：

1.注意参数写法

2.组件需为立即调用函数

(function(){})()

查看JS立即执行