Vue.js组件中插槽和相关动态组件、异步组件的示例分析
这篇文章主要为大家展示了“Vue.js组件中插槽和相关动态组件、异步组件的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue.js组件中插槽和相关动态组件、异步组件的示例分析”这篇文章吧。
创新互联是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括网站制作、成都网站设计、电商网站制作开发、成都小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！
插槽（Slot）
定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的标签中定义的内容不会被渲染。
在子组件中通过加入元素占位，便能够渲染父组件中子组件标签中的内容了。
插槽内容
任何模版代码
HTML代码
其他组件
插槽可以有默认内容，当在父组件中没有提供内容的时候，来进行显示。
Submit
1.
⬇️
Submit
2.
Save
⬇️
Save
作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
具名插槽
试想，我们有一个带有如下模版的组件
可以看到，在组件中显示的内容是划分不同的部位的，这个时候就需要使用到元素的一个特有的属性：name来实现了。这个特性可以用来定义额外的插槽。
一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
当然，也可以将默认插槽的内容通过v-slot:default包裹起来。
v-slot 只能添加在一个 上
作用域插槽
当我们希望能够让插槽内容能够访问子组件中才有的数据时，我们可以将数据作为一个元素的特性绑定上去
{{ user.name }}
绑定在元素上的特性被称为插槽prop。此时我们在父组件中通过给v-slot带一个值来定义我们提供的插槽prop的名字。
{{ slotProps.user.age }}
独占默认插槽的缩写语法
当被提供的内容只有默认插槽时，上面的写法可以被简化来写
{{ slotProps.user.firstName }}
{{ slotProps.user.firstName }}
需要注意两点：
简化写法不能和具名插槽混用，作用域不明确
出现多个插槽时，所有插槽都使用完整的基于语法
解构插槽Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) {
// 插槽内容
}这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
{{ slotProps.user.firstName }}
⬇️
{{ user.firstName }}
使用场景举例
插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。
这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
...
具名插槽缩写
v-slot可以缩写为#。
缩写方式只有在有参数的时候才可以使用
{{ user.firstName }}
{{ user.firstName }}
动态组件&keep-alive
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。为了解决这个问题，我们可以用一个元素将动态组件包裹起来
注意这个 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
更加详细的说明在我们之后的实战过程中遇到的话，再进行专门解说。
异步组件
在实际的项目过程中，我们往往会将一系列的功能分割成一个个小的代码块，希望只有在需要的时候才去加载。为了达成这个目的，Vue允许我们以一个工厂函数的方式定义我们的组件，这个工厂函数会异步解析组件的定义。
Vue只有在这个组件需要渲染的时候才会触发这个工厂函数，而且会把结果缓存起来供之后使用。
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: 'I am async!
'
})
}, 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.js组件中插槽和相关动态组件、异步组件的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前标题：Vue.js组件中插槽和相关动态组件、异步组件的示例分析
网页路径：
http://kswsj.cn/article/psghoi.html
