如何制作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的內容傳遞給組件。

總結

以上是生活随笔為你收集整理的如何制作Vuejs组件，并且在项目中使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。