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

 

现在