vue总结1

• vue异步加载组件

为什么使用？
js解释器是单线程，一次加载所有文件会影响用户体验。异步组件在使用的时候才加载js等文件。首屏优化用。

问题：使用import返回Promise报错unexpected token。

components:{
	'hello-world' : () => import(url)
}

解决方法：
引入插件：npm install --save-dev babel-plugin-syntax-dynamic-import
在.babel文件中plugins中添加该插件

• v-model

v-model是一种语法糖，既可以支持原生表单元素，也可以支持自定义组件。

自定义组件写法：
1.父组件中定义名为value的data，通过 v-model传给子组件
子组件中props接受value，并展示在页面。通过this.$emit(‘input’,newVal)
2.在子组件中定义model，属性prop替换value，event属性替换input

问题：当子组件中不写model，只能传value

思考：啥原理？参考文档

修饰符:
.lazy 响应表单组件chang事件，而不是input。对自定义组件没有作用。
.number type为number时获取的value仍是string类型，而加了number修饰符输入数字则获取的是number类型。
.trim

原生事件绑定到组件：
组件hello-world中有一个input。在hello-world中this.$listeners获取到赋值给input的v-on，这样在input的@click等原生事件会直接触发到hello-world上。

修饰符：.sync：this.$emit('update:title', newTitle)，可以同步修改父元素的

组件注册：
全局：Vue.component(‘component-a’, { /* … */ })，记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
局部：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
  }
})

prop
静态传过去数字也是string类型。不要直接修改props的值，可以接一下再修改。

透传：
this.$attrs是没有写在props里的其他绑定。 可以通过v-bind="$attrs"传入内部组件
this.$listeners是没有用.native的其他监听。可以通过v-on="$listeners"传入内部组件
也就是说，如果a-b-c三个组件，a需要给c传，可以在b上进行以上两步实现透传。就可以直接在c中接到a传来的props，并且emit出去a的监听。
将要传递的东西写到一个集合里，按需取，省力。

实现透传的其他方式：
vuex（麻烦，不要啥啥都写vuex里）、
vue bus（难定位问题）、
b接收到了传给c（代码里基本用的都是这种方式，b多写很多props并且都要给c传，c再一个一个接）

provide&inject也可以实现祖宗辈的传值，但是inject进来的值watch不到变化，如果需要响应式就不能用。

$event：
当有传参进来时需在@method-name="handle('abc',$event)"

插槽：
a组件里用b组件
a里：

<template v-slot:slotName='msgFromB'>
	{{  msgFromB.bmsg + amsg  }}
</template>

b里：

<slot name="slotName" :bmsg="bmsg">

slotName是插槽名称，msgFromB是从子传过来的参数对象，bmsg是从b传过来的具体参数名称。
插槽名称不给，默认是default。

动态组件

<component v-bind:is=""></component>

使用keep-alive可以将组件保存在缓存里，不会调用组件的销毁。会调用activated和deactivated。
include exclude max
is里除了组件还可以写div