Vue（八）：动态组件、异步组件和组件边界

5、动态组件、异步组件

　　1）、动态组件
　　之前我们谈过v-if和v-show的区别：如果使用v-show，切换组件，只不过是相应组件的显示和隐藏；而v-if则会销毁之前的组件并渲染新组建。如果我们在v-if切换的组件之外，套上<keep-alive>标签，那么本该销毁的组件则会被缓存起来。当我们重新切换回来时依旧会重新渲染（确实找不到对应的dom元素），但是之前的vue实例没有被销毁，vue实例中的属性和变量都还在，这个标签非常适合做单页面应用。

　　2）异步组件
　　以app.vue为例，如果我们在这个页面静态引入了一万个组件，那么该app.vue生成的文件会包含这一万个组件的信息，那这个文件就会变得很大，浏览器引用这个几M大的js，会加载的比较慢，甚至很慢。
　　但是，如果我们使用的是异步组件，也就是懒加载（千辛万苦查到的别名），那么这一万个组件大概会生成一万个js，当vue需要调取哪个组件时，就会从服务器获取对应的js，加载进来。这样的话，app作为主程序，打开的速度就变快了，除非它确实一打开就需要加载1万个组件。后面，把官网的代码粘进来吧。

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})  //这是导入局部组件的方法

　　如果后面有需要再给异步加载单独写一篇吧

5、组件边界

　　1）、访问根节点
　　我们可以在任何一个地方通过this.$root访问根节点的数据，但是容易造成混乱，不建议在大型项目中调用。如果你使用的是vue项目，那这个根节点应该是main.js中创建的vue实例。官网建议使用vuex，我点过去这是另外一个开源的项目，回头研究研究。

　　2）、访问父节点
　　this.$parent代表父节点

　　3）、访问子节点
　　在组件上设置ref属性，给ref设置属性名，渲染完组件之后，访问this.$refs.属性名就是访问这个组件的vue实例了，如果有相同的属性名，则最后一个会覆盖前面相同的vue实例

　　4）、依赖注入
　　父级组件通过provide来声明父级有哪些属性/方法可以访问，子级组件通过inject来声明我会访问父级的哪些属性/方法，官网建议理解成大范围的prop。

provide: function() {  //父级代码
          return {
            getMap: this.getMap
          };
        },

inject: ["getMap"],  //子级代码

　　5）、

Vue（八）：动态组件、异步组件和组件边界

猜你喜欢