7种经常使用的Vue-js模式和36个实用Vue开发技巧，你知道多少？

像上面这样的组件会导致“超过最大堆栈大小”的错误，所以要确保递归调用是有条件的即(使用 v-if 最终将为 false）

4.内联模板

当特殊属性 inline-template 存在于一个子组件上时，该组件将使用它的内部内容作为它的模板，而不是将其视为分布式内容，这允许更灵活的模板编写。

These are compiled as the component's own template.

Not parent's transclusion content.

5.动态指令参数

指令参数可以是动态的。例如，在 v-mydirective:[argument]=“value" 中， argument 可以根据组件实例中的数据属性更新！这使得我们的自定义指令可以灵活地在整个应用程序中使用。

这是一条指令，其中可以根据组件实例更新动态参数：

Scroll down inside this section ↓

new Vue({
el: ‘#dynamicexample’,
data: function () {
return {
direction: ‘left’
}
}
})

6.事件和键修饰符

对于 .passive、.capture 和 .once 事件修饰符，Vue提供了可与 on 一起使用的前缀：

例如：

on: {
‘!click’: this.doThisInCapturingMode,
‘~keyup’: this.doThisOnce,
‘~!mouseover’: this.doThisOnceInCapturingMode
}

对于所有其他的事件和键修饰符，不需要专有的前缀，因为你可以在处理程序中使用事件方法。

7.依赖注入(Provide/Inject)

有几种方法可以让两个组件在 Vue 中进行通信，它们各有优缺点。在2.2版本中引入的一种新方法是使用Provide/Inject的依赖注入。

这对选项一起使用，允许一个祖先组件作为其所有子孙的依赖注入器，无论组件层次结构有多深，只要它们在同一个父链上。如果你熟悉React，这与React的上下文功（context）能非常相似。

// parent component providing ‘foo’
var Provider = {
provide: {
foo: ‘bar’
},
// …
}

// child component injecting ‘foo’
var Child = {
inject: [‘foo’],
created () {
console.log(this.foo) // => “bar”
}
// …
}

#36个Vue开发技巧
##1、require.context()
1.场景:如页面需要导入多个组件,原始写法:

importtitleComfrom’@/components/home/titleCom’
importbannerComfrom’@/components/home/bannerCom’
importcellComfrom’@/components/home/cellCom’
components:{titleCom,bannerCom,cellCom}

2.这样就写了大量重复的代码,利用require.context可以写成

constpath=require(‘path’)
constfiles=require.context(‘@/components/home’,false,/.vue$/)
constmodules={}
files.keys().forEach(key=>{
constname=path.basename(key,‘.vue’)
modules[name]=files(key).default||files(key)
})
components:modules

这样不管页面引入多少组件,都可以使用这个方法

3.API方法

实际上是webpack的方法,vue工程一般基于webpack,所以可以使用require.conte 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 xt(directory,useSubdirectories,regExp)
接收三个参数:directory：说明需要检索的目录useSubdirectories：是否检索子目录regExp:匹配文件的正则表达式,一般是文件名
##2、watch
2.1常用用法

1.场景:表格初始进来需要调查询接口getList(),然后input改变会重新查询

created(){
this.getList()
},
watch:{
inpVal(){
this.getList()
}
}

用用法**

1.场景:表格初始进来需要调查询接口getList(),然后input改变会重新查询

created(){
this.getList()
},
watch:{
inpVal(){
this.getList()
}
}