Vue.js组件中插槽和相关动态组件、异步组件的示例分析

这篇文章主要为大家展示了“Vue.js组件中插槽和相关动态组件、异步组件的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue.js组件中插槽和相关动态组件、异步组件的示例分析”这篇文章吧。

创新互联是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括网站制作、成都网站设计、电商网站制作开发、成都小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

插槽（Slot）

定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的标签中定义的内容不会被渲染。

在子组件中通过加入元素占位，便能够渲染父组件中子组件标签中的内容了。

插槽内容

  1. 任何模版代码

  2. HTML代码

  3. 其他组件

插槽可以有默认内容，当在父组件中没有提供内容的时候，来进行显示。



 Submit



1.

⬇️ 

 Submit


2.

 Save

⬇️

 Save

作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

具名插槽

试想，我们有一个带有如下模版的组件


 

 
 

 

 
 

 

 
 

可以看到，在组件中显示的内容是划分不同的部位的，这个时候就需要使用到元素的一个特有的属性：name来实现了。这个特性可以用来定义额外的插槽。


 

 
 

 

 
 

 

 
 

 一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个  

A paragraph for the main content.

 

And another one.

   

Here's some contact info

 

现在