vueslotscope使⽤_Vue的⼀些⼩技巧，可以收藏⽤到的时候特
别爽
给 props 属性设置多个类型
这个技巧在开发组件的时候⽤的较多，为了更⼤的容错性考虑，同时代码也更加⼈性化：
export default { props: { width: { type: [String, Number], default: '100px' } // 或者这样 // width: [String, Number] }}
⽐如⼀个 上暴露了⼀个 width 属性，我们既可以传 100px，也可以传 100 ：
{{ computedWidth }}
使⽤：
阻⽌ 默认提交⾏为
有时候我们在⽤饿了么组件 在⽂本框中键⼊ enter 快捷键的时候会默认触发页⾯刷新。我们可以加⼊如下代码解决其默认⾏为：
...
使⽤ 组件
Element 官⽅是没有明确提供这个组件的，但是其源码 中确实存在。关于如何使⽤我写了⼀个Demo，你可以狠狠的戳这⾥查看⽰例，本
⽂不再赘述。
根据业务合并 el-table 中的⾏和列
最近在做项⽬的时候遇到⼀个需求：同⼀个账号ID下有多个被分配的⾓⾊时并列显⽰⾓⾊信息。于是就想到了 el-table 提供的合并⽅法
:span-method。但它对后台数据格式是有要求的：
如果后台返回的数据是数组⾥⾯嵌套数组的话，你就需要把⾥⾯的数组按顺序也拿到外⾯了
// 假如后台返回的数据是下⾯这样的{ data: [ { id: 1, appkey: 1, name: 'a', list: [{ id: 11, appkey: 1, name: 'a-1'}, {id: 12, appkey: 1, name: 'a-2'}] } { id: 2, appkey: 2, n 下⾯是具体的处理流程：
...
单⽂件样式提取
如果 a.vue 和 b.vue 都⽤到了下⾯的样式：
.btn { color: silver}// 省略很长的样式...
可以考虑把样式提取到 styleName.scss/css 中，例如：
./components/common.scss
.btn { color: silver}// 省略很长的样式
然后再在两⽂件中引⼊，即：
...
是不是省了很多代码呢？快去试试吧！
解决 vue-template-admin 单⽂件中背景图⽚⽣产打包后路径404问题
到 build/utils.js
然后到 generateLoaders ⽅法
在 act){...} 中修改，即：
if (act) { // 解决其打包背景图⽚路径问题 loaders.push({ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../../' } })} else { ...}
记住，千万别再你的 css 中这样写：
background: url("/new/static/images/assets/loginbackground.png")；复制代码
因为 new ⽂件夹是后台同学帮你配置的，随时都有可能被修改，⼀个地⽅还好，多个地⽅改起来就蛋疼了。
data 初始化
因为 props 要⽐ data 先完成初始化，所以我们可以利⽤这⼀点给 data 初始化⼀些数据进去，看代码：
export default { data () { return { buttonSize: this.size } }, props: { size: String }}
除了以上，⼦组件的 data 函数也可以有参数，且该参数是当前实例对象。所有我们可以利⽤这⼀点做⼀些⾃⼰的判断。如，改写上⾯的代码：
export default { data (vm) { return { buttonSize: vm.size } }, props: { size: String }}
template
我们在做 v-if 判断的时候，可以把判断条件放在 template 组件上，最终的渲染结果将不包含 元素。
...
...
v-for 也同样适⽤。
Lifecycle hook
⽣命周期钩⼦可以是⼀个数组类型，且数组中的函数会依次执⾏。
export default { ... created: [ function one () { console.log(1) }, function two () { console.log(2) } ] ...}
没什么⽤，知道就⾏了。事实上⽣命周期钩⼦还可以作⽤于 DOM 元素上，利⽤这⼀点，我们可以⽤⽗组件中的⽅法来初始化⼦组件的⽣命
周期钩⼦：
I'm child!
其他钩⼦雷同，不再赘述。
v-for
在⽤ v-for 遍历数组的时候，我们⼀般都会错误的这样去做，举个栗⼦：
v-for 和 v-if 放在同⼀个元素上使⽤：
{{ user.name }}
由于 v-for 和 v-if 放在同⼀个元素上使⽤会带来⼀些性能上的影响，官⽅给出的建议是在计算属性上过滤之后再进⾏遍历。所以平时开发
不推荐⼀起使⽤，知道有这回事即可，不⾄于⾯试时不知道。 关于为什么不推荐放在⼀起使⽤，参见 避免-v-if-和-v-for-⽤在⼀起。
混合
如果好多组件都共⽤到⼀些像 props、data、methods 等，可以单独抽出来放到 mixins 混合器中。⽐如，在⽤户管理列表中使⽤。
分页混合器：
/
vuejs流程图插件/ paging-mixin.vueexport default { props: { pageSize: 1, pageLength: 10, currentPage: 1 total: 20 }, methods: { /** * 上⼀页 */ prevPage (page) { ... }, /** * 下⼀页 */ Users.vue:
不⽤每个页⾯都写⼀遍 props 和 methods 了。
render 函数
下⾯是⼀段简单的 template 模板代码：
title
this is content
我们⽤渲染函数来重写上⾯的代码：
export default { render (h) { let _c = h return _c('div',  { class: 'box'},  [_c('h2', {}, 'title'), 'this is content']) }}
事实上，Vue 会把模板(template)编译成渲染函数(render)，你可以通过⼀个在线⼯具 实时查看编译结果。上⾯的 template 模板会被编
译成如下渲染函数：
let render = function () { return _c('div', {staticClass:"box"}, [_c('h2', [_v("title")]), _v("this is content")])}
是不是很像？ 正如官⽅说的，渲染函数⽐ template 更接近编译器。如果⽤⼀个流程图来解释的话，⼤概是这个样⼦：
template ↓预编译⼯具(vue-loader + vue-template-compile) ↓ render ↓resolve vnode
具体参见 Vue声明周期图⽰。
渲染函数⽤处：
开发组件库，Element 源码⽤的都是 render
封装⼀些⾼阶组件。组件⾥⾯嵌套组件就是⾼阶组件，前提是要满⾜组件三要素：props、event、slot
⽤于处理⼀些复杂的逻辑判断。如果我们⼀个组件⾥⾯有很多 v-if 判断的话，⽤模板就显得不合适了，这个时候可以⽤渲染函数来轻松处理
errorCaptured
捕获⼀个来⾃⼦孙组件的错误时被调⽤。有时候当我们想收集错误⽇志，却不想把错误暴露到浏览器控制台的时候，这很有⽤。下⾯是个例⼦：
Child.vue
Parent.vue
关于 errorCaptured 更多说明，请移步官⽹-> 。
v-once
通过 v-once 创建低开销的静态组件。渲染普通的 HTML 元素在 Vue 中是⾮常快速的，但有的时候你可能有⼀个组件，这个组件包含了⼤量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算⼀次然后缓存起来，就像这样：
⽤户协议
... a lot of static content ...
只渲染元素和组件⼀次。随后的重新渲染，元素/组件及其所有的⼦节点将被视为静态内容并跳过。这可以⽤于优化更新性能。关于 v-once 更多介绍，请移步官⽹->。
slot-scope
作⽤域插槽。vue@2.5.0 版本以前叫 scope，之后的版本⽤ slot-scope 将其代替。除了 scope 只可以⽤于 元素，其它和 slot-scope 都相同。
⽤过 Element 组件的同学都知道，当我们在使⽤ 的时候会看到如下代码：
Element@1.4.x 的版本：
编辑删除
但在 2.0 之后的版本替换成了 slot-scope。
Element@2.0.11：
编辑删除
说⽩了，slot-scope 相当于函数的回调，我把结果给你，你想怎么处理就怎么处理，⼀切随你：
function getUserById (url, data, callback) { $.ajax({ url, data, success: function (result) { callback(result) } })}// 使⽤getUserById('/users', { id: 1 }, function (response 下⾯我们来简单模拟下 组
件内部是怎么使⽤ slot-scope 的，看代码：
模拟的 组件：
// 定义模板let template = `
{{ item.name }}
`Vueponent('el-table', { template, props: { data: Array, default: [] }})
在你需要的地⽅使⽤ 组件：
HTML:
{{ w.name }} {{ w.name }}
JavaScript:
new Vue({ el: '#app', data: { userData: [ {id: 1, name: '张三', isActived: false}, {id: 2, name: '李四', isActived: false}, {id: 1, name: '王五', isActived: true}, {id: 1, name CSS:
.red { color: red}复制代码
你可以狠狠的戳这⾥查看上⾯的效果！最后，我们再使⽤ render 函数来重构上⾯的代码：
JavaScript:
// `` 组件Vueponent('el-table', { name: 'ElTable', render: function (h) { return h('div', {  class: 'el-table' }, this.$slots.default) }, props: { data: Array }})// `` 在你的页⾯这样来使⽤：
HTMl:
{{ w.name }} {{ w.name }}
JavaScript:
new Vue({ el: '#app', data: { list: [ { id: 1, name: '张三', actived: false }, { id: 1, name: '李四', actived: false }, { id: 1, name: '王五', actived: true }, { id: 1, name: '赵六'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。