如何制作Vuejs组件，并且在项目中使用

如何制作VueJS的组件，并且在项目中使用

---

第一步：搭建一个JS的框架，这里我习惯使用AMD规范

		define(function(require, exports, module){
		   
		}

然后可以在项目里面引入需要的类库，或者JS文件，例如

		define(function(require, exports, module){
		    var $ = window._$ = require("lib_cmd/zepto-cmd"),
		        main = require("../main-cmd"),
		        Vue = require("lib_cmd/vue-cmd");
		}

在项目中引入zepto、vue-cmd类库，以及需要的main-cmd的JS文件

---

第二步：在搭建的框架中去使用定义一VUE的组件

		Vue.component('child-recommend', {
				    template: '#component_recommend',
				    props:["goodsInfo"],
				    data: function () {
					})
				})

child-recommend是组件的名字，template是组件的模板内容，#component_recommend表示的是ID为component_recommend的template，在这里组件的data必须要是函数，用于保存当前定义的变量或者数据。props是父JS要传递给组件的数据，都是封装在这个里面的。

---

第三步：将组件暴露出去

	define(function(require, exports, module){
	    var $ = window._$ = require("lib_cmd/zepto-cmd"),
	        main = require("../main-cmd"),
	        Vue = require("lib_cmd/vue-cmd");
			
		Vue.component('child-recommend', {
			    template: '#component_recommend',
			    props:["goodsInfo"],
			    data: function () {
				})
			})
 
	 module.export= Vue;  // 在这里将组件暴露出去
}

---

第四步：书写组件的template内容

	<template id="component_recommend">
		   <link href="/css/goods-recommend2.css?v=<%= config.version %>" rel="stylesheet" />　 //引入需要的样式
		  　<div id="widget_goods_recommend" data-role="widget" class='r_p1'></div>　　　　　//进行内容填充
	</template>

---

第五步：在目标JS中引入组件，并且定义ＶＵＥ对象

	orderdetailCom = require("组件的路径"); //引入定好的组件组件
		var vue = new Vue({
		    el: '#likeGoogs',
		    data: {
		        likeGoods:likeGoods
		    },
		    method:{
		    }
		})

这里的el是组件引入EJS页面的id="likeGoogs"的部分的内容，data里面用于将存放值

---

第六步：在目标ＥＪＳ中引入组件的ＥＪＳ文件

	<%- include +组件的路径 %>
	<div id="likeGoogs">
	    <child-recommend :goods-info="likeGoods"></child-recommend>
	</div>

首先通过<%- include+组件的路径 >引入组件到文件里面，然后在通过child-recommend（组件的名字）放置组件。

:goods-info="likeGoods"用于将likeGoods的数据传递给goods-info，这里是子组件Props里面需要的内容，Vue会自动解析成goodInfo，这样就实现了将父JS的内容传递给组件。