<!-- 这样会触发一个警告 --> <current-user #="{ user }"> {{ user.firstName }} </current-user> <!-- 这样是正确的 --> <current-user #default="{ user }"> {{ user.firstName }} </current-user>
动态组件&keep-alive
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。为了解决这个问题，我们可以用一个<keep-alive>元素将动态组件包裹起来
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
更加详细的说明在我们之后的实战过程中遇到的话，再进行专门解说。
异步组件
在实际的项目过程中，我们往往会将一系列的功能分割成一个个小的代码块，希望只有在需要的时候才去加载。为了达成这个目的，Vue允许我们以一个工厂函数的方式定义我们的组件，这个工厂函数会异步解析组件的定义。
Vue只有在这个组件需要渲染的时候才会触发这个工厂函数，而且会把结果缓存起来供之后使用。
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000) })
其实，这个过程有些类似于我们设计一个异步函数，这个工厂函数会收到一个resolve回调，这个回调在我们从服务器获取到组件定义的时候被调用，当加载失败的时候我们也可以调用reject(reason)。
一个推荐的做法是异步组件和webpack的code-splitting功能结合使用
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
同样，也可以在工厂函数中返回一个Promise
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') )
处理加载状态
上面的工厂函数可以返回一个下面格式的对象
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 })
小结
本篇我们主要围绕着Vue组件中的插槽和相关动态组件、异步组件的内容进行了梳理。通过这两篇的整理，我们对于Vue组件有了一个比较整体的了解。后续我们会在实战过程中针对具体的点再进行详细的说明。
以上所述是小编给大家介绍的Vue.js组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: