vue編譯後帶參數

㈠ 如何封裝vue中的參數

情況就是有一個組件是card,內部有一個區域可以放置各種操作組件（基本就是按鈕組，有一些特殊 UI 情況）。然後項目中這個 card 可能的操作類型是比較確定的。
一個典型場景是在某個頁面下， card 的操作類型是不固定的。
這個 vue的設計我自己有三種想法

A 內部實現所有的操作類型，暴露一個 actionType 開關
B 內部保留 slot ，使用者負責填充 action 組件
C 設置一個 cardBase 保留 slot ，對每種操作類型封裝一個對應的 actionCard
個人感覺是非常傾向於 C ，然而由於不同的 actionCard 除了 baseCard 的參數相同之外，控制 action 的參數都不同，結果就會導致 fragment instance 問題。
然後我就猶豫了，目前的問題是

㈡ vue和angular 編譯速度誰更快

框架之間的對比雖然是老生常談，但也確實是繞不過去的話題，Vue本身的文檔里也直接就有和其他框架的對比。同為開源的技術方案，比較本身其實沒有任何問題，但在寫Vue與其他框架的比較的時候，我們盡力做到兩點：

1. 確保事實的准確性。有的就是有，沒有就是沒有，不確定的就不說，弄錯了一定改。

2. 確保語氣的中立性。別人的缺點指出但不嘲諷，優點大方承認。

之前 @汪志成 對Vue跟 Angular 的比較文案提出了意見，我們也對應地進行了修訂。也歡迎社區繼續進行監督和反饋 —— 比較的目的不是扭曲大家的認知，而是為了幫助大家做出自己的判斷。

現在說回來大漠（後面都用大漠指代，注意跟 w3cplus@大漠老師不是一個人，對不住了哈哈）的這篇文章，很遺憾，以上兩點都不及格。

先說事實。

CLI/工具鏈

首先兩個框架 CLI 的定位不一致。vue-cli 不是一個打包工具，它只是一個 scaffold，也就是初始化工具。真正負責打包的是初始化之後項目內的 webpack 配置和 npm 腳本。從一開始vue-cli 就是這樣的設計意圖，項目真正的工具鏈在項目模板裡面而不是 CLI 裡面。

相比之下 @angular/cli 是一個全包式的命令行工具，一切都是通過 `ng` 來執行，但這不代表 `ng` 有的命令Vue就沒有對應的功能 —— 比如在vue-cli 生成的項目裡面：

• npm run dev 對應 ng serve

• npm run build 對應 ng build

• npm run lint 對應 ng lint

• npm run unit 對應 ng test

• npm run e2e 對應 ng e2e

除了 i18n 之外，@angular/cli 有的Vue都有。『很多日常開發必備的功能都需要開發者自己去下載配置第三方的Node模塊』這句話是一個事實上的錯誤。看起來大漠連vue-cli 生成的項目都沒跑過就急著寫文章了呢。

其次，CLI 命令/參數多 =更優秀？並沒有這樣的道理，create-React-app 估計要哭暈在廁所了。如果我們仔細看看文中的截圖，ng build 的多個參數，其實就是對應不同的底層 webpack 配置。說實話，我相信不僅僅是我，對於很多其他開發者而言，更寧可直接閱讀 webpack 的文檔來調整真正的 webpack 配置（並且可以 commit 進項目），而不是去額外學習一套由 Angular 封裝的抽象，因為實際生產中需求千變萬化，完全被 CLI 封裝的配置不利於二次開發。

實事求是地說，@angular/cli 確實有一些值得學習的地方，比如 ng serve 對 SSL 的支持。我們也會在新版本的vue-cli 中持續吸收改進，但連vue-cli 能做什麼都沒弄清楚就拿玩具來打比方，只能貽笑大方了。

非同步載入模塊

我不知道為什麼大漠又截了個不知哪裡的舊中文文檔的圖，還沒截全 —— 最新的關於非同步載入的文檔是下面這兩個鏈接：

• 文檔中關於非同步組件的部分

• 路由文檔關於路由懶載入的部分

Vue將一個組件（以及其所有依賴）改為非同步載入，所需要的只是把：

• import Foo from './Foo.vue'



改成

• const Foo = () => import('./Foo.vue')



就這么簡單。這里注意三點：

• 當這樣分割的時候，該組件所依賴的其他組件或其他模塊都會自動被分割進對應的 chunk 里，不存在大漠所暗示的『手動改 500 個組件』這樣的情況。況且兩邊代碼分割的功能都是 webpack 提供的，我真不知道大漠是真的不懂還是故意誤導。

• 所謂的路由級別的分割，只需要把這個組件作為路由組件就可以了，甚至連路由配置表都不用改。

• 更重要的是這樣的非同步組件並不一定只能用在路由層面 —— 任何你要用到一個組件的地方，都可以用非同步組件無縫替換之，這種靈活性是 Angular 的 loadChildren 根本無法比擬的。比如一個動態的長表單頁面，你甚至可以根據用戶目前的輸入來動態抓取表單接下來的部分（這個用例還是 wepback 的維護者 Sean Larkin 發現並用在生產中的）。

單元測試和集成測試

• Vue的單元測試需要你自己去安裝配置 Karma + Jasmine

—— 事實錯誤。vue-cli 的 webpack 模板內置了開箱即用的 Karma + Jasmine 配置，自帶了一個初始測試用例，npm run unit 即可。這又雙一次證明大漠根本沒有跑過vue-cli 生成的項目。

Vue的單測不僅僅支持 Karam + Jasmine - 事實上社區有廣泛的單測反饋，對於 Jest, Ava 都有實踐，我們正在開發中的官方的單測工具庫vue-test-utils （由社區最流行的單測庫 avoriaz 的開發者開發）會進一步簡化常見的組件單測斷言需求，並且還會有和所有主流 test runner 的整合指南。

• 在集成測試方面，Vue就只能是0分了，因為壓根什麼都沒做。

—— again，事實錯誤。vue-cli 的 webpack 模板內置了開箱即用的 Nightwatch + Selenium E2E 測試配置，自帶了一個初始測試用例，npm run e2e 即可。這又雙叒一次證明大漠根本沒有跑過vue-cli 生成的項目。

• 從對集成測試的支持大家應該可以看出來，在那些技術含量不太高的地方，Vue確實可以抄襲得有模有樣，但是一旦技術門檻提高，Vue就沒法抄了，或者說抄得沒那麼快了。

—— 集成測試這種東西，有什麼技術門檻可言，還需要抄么？順便說一句，vue-cli 初始化的項目可是早比 @angular/cli 正式發布前就已經自帶集成測試了...

㈢ vue emit 有多個參數該如何寫

詳細步驟如下：

一、$emit傳遞一個參數時

子組件：

this.$emit('closeChange',false)。

父組件：

<posilCom @closeChange="closeCom($event)"></posilCom>closeCom(msg) { this.msg = msg;}。

二、$emit傳遞多個參數時

子組件：

this.$emit('closeChange',false,true)。

父組件：

<posilCom @closeChange="closeCom(arguments)"></posilCom>closeCom(msg)this.msg1 = msg[0]; this.msg2 = msg[1]。

(3)vue編譯後帶參數擴展閱讀：

一、vue emit 3個參數詳細描述：

1、子組件的JS

**/define(function(require, exports, mole){var $ = require("lib_cmd/zepto-cmd"),

Vue = require('lib_cmd/vue-cmd'),

main = require("js_cmd/main-cmd"),

var vm= Vue.component('myaddress', {

template: ' <div data-role="data-widget" data-widget="address-editor"

class="address_mask" id="address-editor"></div>' props:["address","ids"],

methods: {created: function () mole.export= vm;/*注冊名為「myaddress」的組件 ，從父組件傳遞過來兩個數據"address","ids"*/

2、父組件EJS頁面

<%- include ../../header %>

<link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="stylesheet" />

<div data-role="container"

class="body <%= pageName %>" id="myAward"><myaddress :address="editAddr"

:ids="ids"></myaddress>

</div><script> seajs.use('js_cmd/vd/activity/myAward-cmd');</script>

<%- include ../../footer %>

/*在定義的組件 「myaddress」中綁定兩個父組件的數據 "editAddr" "ids"*/

3、父組件的JS頁面

* Created by youchen.ma on 2017/6/21.

*/define(function (require, exports, mole)

var $ = require("lib_cmd/zepto-cmd"),

Vue = require("lib_cmd/vue-cmd"),

main = require("js_cmd/main-cmd"),

Address = require('js_cmd/vd/venue/widget/venueEditAddress-cmd') //引入子組件的JS文件

二、vue emit定義：

主要內容包括數據綁定、指令、表單控制綁定、過濾器、組件、表單驗證、服務通信、路由和視圖、vue cli、測試開發和調試、源代碼分析以及主流的打包和構建工具。內容全面，講解詳細，示例豐富，適合各級開發人員。

㈣ vue cli 請求後台數據 怎麼設置參數

easyui的各個插件跟後台通訊一般來說使用url參數,復雜的可以自己寫ajax,並且有些插件還提供類似load,reload之類的方法來載入數據,查看一下文檔吧

㈤ 如何讓vue中變數作為一個參數傳遞

使用vue.js與台實現數據交互利用vue-resource組件提供系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具體舉例：
1、導入vue-resource

2、基於全局Vue象使用http
// 通someUrl獲取台數據功執行then代碼
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、Vue實例內使用$http
// $httpvue局部范圍內實例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
說明：
發送請求使用then處理響應結then兩參數第參數響應功調函數第二參數響應失敗調函數

㈥ vue-router 20 next 函數怎麼攜帶參數

{{eltourism_name}} {{eltog_line_id}} {{eladdress}} 在組件中，需要傳動態參數時，可以如上例子 query中的參數id就是要傳的參數，在組件中獲取的方法為： created: function() { var id = this$routequeryid; thisgetData(id);vue-router 20 next 函數怎麼攜帶參數

㈦ vue2.0路由後面的參數怎麼在頁面中傳遞

可以通過vuex完成組件之間的傳參，包括數組對象等，這也是作者建議的做法，構建大型項目管理的狀態過多不可能都通過url的方式傳遞參數的。 用了vue-router就是單頁app,頁面都沒刷新過，你把變數放在 window. 所有組件都能訪問得到。

㈧ vue怎麼傳多個對象參數到後台

使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具體舉例如下：
1、導入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

2、基於全局Vue對象使用http
// 通過someUrl獲取後台數據，成功後執行then的代碼
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一個Vue實例內使用$http
// $http是在vue的局部范圍內的實例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
說明：
在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

㈨ vue-router go-1後退時怎麼帶參數

首先在app.vue裡面有這么一段 然後你所點擊的按鈕其實是這個東西，這個其實就是個封裝完的a標簽 你在router裡面配置完了相關路由之後就能在點擊這個按鈕的時候將router-view標簽裡面的組件替換掉了