Vue中的插槽是什么

  介绍

这篇文章主要介绍了Vue中的插槽是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

 Vue中的插槽是什么

Vue插槽,是学习Vue中必不可少的一节,当初刚接触Vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。

后面越来越发现插槽的好用。

分享一下插槽的一些知识吧。

<强>一、插槽内容

一句话:插槽内可以是任意内容。

先看一下下面的代码:声明一个子组件组件,

如果现在我想在& lt; child-component> & lt;/child-component>内放置一些内容,结果会是怎样?

& lt; div  id=癮pp"比;   ,,,& lt; child-component> & lt;/child-component>      & lt;/div>   & lt; script>   ,,,Vue.component (& # 39; child-component& # 39;, {   ,,,,,,,模板:   ,,,,,,,,,,,& lt; div>你好,世界! & lt;/div>   ,,,,,,,”   ,,,})   ,,,let  vm =, Vue ({new    ,,,,,,,el: & # 39; #应用# 39;   ,,,,,,,数据:{      ,,,,,,,}   ,,,})   & lt;/script> & lt; child-component>你好& lt;/child-component>

输出内容还是在组件中的内容,在& lt; child-component>内写的内容没起作用。

 Vue中的插槽是什么

我们现在给组件增加一个& lt; slot> & lt;/slot>插槽

我们在& lt; child-component> & lt;/child-component>内写的“你好“起作用了! ! !

Vue.component (& # 39; child-component& # 39;, {   ,,,,,,,模板:   ,,,,,,,,,,,& lt; div>   ,,,,,,,,,,,你好,世界!   ,,,,,,,,,,,& lt; slot> & lt;/slot>   ,,,,,,,,,,,& lt;/div>   ,,,,,,,”   ,,,})

 Vue中的插槽是什么

到现在,我们知道了什么是插槽:

<>强插槽就是Vue实现的一套内容分发的API,将& lt; slot> & lt;/slot>元素作为承载分发内容的出口。

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了槽元素后,在组件元素内写的内容就会跑到它这里了!

<强>二,具名插槽

具名插槽,就是给这个插槽起个名字

在组件中,我给插槽起个名字,一个名字叫“girl",一个名字叫“boy",还有一个不起名字。

然后再& lt; child-component> & lt;/child-component>内,槽属性对应的内容都会和组件中名字一一对应。

而没有名字的,就是默认插槽! !

& lt; div  id=癮pp"比;   ,,,& lt; child-component>   ,,,,,,,& lt; template 槽=癵irl"比;   ,,,,,,,,,,,漂亮,美丽,购物,逛的街   ,,,,,,,& lt;/template>   ,,,,,,,& lt; template 槽=癰oy"比;   ,,,,,,,,,,,帅气,才实   ,,,,,,,& lt;/template>   ,,,,,,,& lt; div>   ,,,,,,,,,,,我是一类人,   ,,,,,,,,,,,我是默认的插槽   ,,,,,,,& lt;/div>   ,,,& lt;/child-component>   & lt;/div>   & lt; script>   ,,,Vue.component (& # 39; child-component& # 39;, {   ,,,,,,,模板:   ,,,,,,,,,,,& lt; div>   ,,,,,,,,,,,& lt; h5>这个世界不仅有男人和女人& lt;/h5>      ,,,,,,,,,,,& lt; slot  name=癵irl"祝辞& lt;/slot>      ,,,,,,,,,,,& lt; div 风格=案叨?1 px;背景颜色:红色,“祝辞& lt;/div>      ,,,,,,,,,,,& lt; slot  name=癰oy"祝辞& lt;/slot>      ,,,,,,,,,,,& lt; div 风格=案叨?1 px;背景颜色:红色,“祝辞& lt;/div>      ,,,,,,,,,,,& lt; slot> & lt;/slot>   ,,,,,,,,,,,& lt;/div>   ,,,,,,,”   ,,,})   ,,,let  vm =, Vue ({new    ,,,,,,,el: & # 39; #应用# 39;   ,,,,,,,数据:{      ,,,,,,,}   ,,,})   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

Vue中的插槽是什么