前端框架之(2) - vue技术栈

版本变更

• slot/slot-scope 改为 v-slot。该指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中 slot 和 slot-scope 特性仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。
• 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：v-bind:[attributeName]="url"
• vue3

slot

• name
• 插槽props
• 作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

父子组件交互

var child = {
       created: function(){
           this.$on('click-child', function(){
               console.log('send ajax here');
           });
       },
       template: '<div></div>'
   };
   
   var app = {
       template: '<div><button v-on:click="clickParent">点击</button><child v-ref:child></child><div>',
       methods: {
           clickParent: function(){
               this.$refs.child.$emit('click-child');
           }
       },
       components: {
           child: child
       }
   };

组件

• prop：组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。子父组件class、style属性合并，其他属性替换。如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。inheritAttrs: false 选项不会影响 style 和 class 的绑定。
• 事件：始终使用 kebab-case 的事件名。
• v-model：默认会利用名为 value 的 prop 和名为 input 的事件，可以用组件的 model 选项替换默认的value和input事件。（2.2.0+）
• .native $listeners
• .sync
• switch 在没绑定v-model时，change不生效，可以使用this.$set设置
• <keep-alive>
• 动态组件：<component v-bind:is="who"></component>
• 异步组件：() => import(/ webpackChunkName: "login" / 'views/root/login.vue')，处理加载状态

处理边界情况

• $root、$parent、