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标签里面的组件替换掉了