vue slot作用域插槽,v-slot插槽
本文主要介绍Vue插槽的使用。生活中很多地方都有插槽，比如电脑usb插槽，插线板的电源插槽。插槽的目的是让我们原有的设备更具扩展性，比如电脑USB。我们可以插u盘，手机，鼠标，键盘等。下面的文章将介绍Vue插槽是如何使用的。
:
目录
1.为什么要用slot？
1.1 slot 1.2组件1.3中的slots例2，如何封装这种组件3，Slot case 4，Slot默认值5，命名slot 6，编译作用域7，作用域Slot。
1、为什么使用slot
1.1 slot(插槽)
生活中很多地方都有插槽，电脑usb插槽，插线板电源插槽。
插槽的目的是使我们的原始设备更具可扩展性。
比如电脑的USB可以插u盘，手机，鼠标，键盘等等。
1.2 组件中的插槽
组件插槽也是为了使我们的组件更具可伸缩性而设计的。
让用户决定组件中的某些内容显示什么。
1.3 例子
在移动开发中，几乎每个页面都有一个导航栏。
我们必须将导航栏封装成一个插件。
一旦我们有了这个组件，我们就可以在多个页面中重用它。
2、如何封装这类组件（slot）
最好的封装方法是把共性提取成组件，把不同的部分暴露成槽。
一旦我们保留了插槽，我们就可以让用户根据自己的需要决定将什么插入插槽。
无论是搜索框、文本还是按钮，都由调度员决定。
3、 插槽的案例
div id=应用程序
按钮按钮/按钮/cpn
cpnphello world/p/cpn
cpnp666/p/cpn
/div
模板id=cpn
差异
H2我是组件/h2。
//槽的预留位置方便用户填写。
插槽/插槽
/div
/模板
脚本src=./js/vue.js/script
脚本
const app=new Vue({
埃尔： #app ，
组件：{
cpn :
模板：`#cpn `，
}
}
})
/脚本
上述代码干了以下事情：
1.定义子组件cpn，然后在子组件中预留一个槽，槽的内容由用户填充。
2.父组件使用了三个子组件，这三个子组件在插槽中填充了不同的内容。
最后展示效果如下：
4、插槽默认值
如果我们需要大量使用这个组件，并且组件预留的大部分槽位都是由后退按钮填充的，只有少数其他的被填充，那么在这种情况下可以为槽位设置一个默认值。
div id=应用程序
cpn/cpn
cpn/cpn
cpn/cpn
/div
模板id=cpn
差异
槽按钮返回/按钮/槽
/div
/模板
我们在子组件中设置了一个带有back按钮默认值的slot，所以如果父组件在使用时没有填充任何东西，默认值就是back按钮。
5、具名插槽
有时我们需要多个插槽。例如对于一个带有如下模板的组件：
模板id=cpn
差异
slot name= header span header/span/slot
slot name= main span middle/span/slot
Slot name= footer页脚/span/slot
/div
/模板
我们在组件中保留了三个插槽，但是这里我们指定了三个名称。用v-slot指定name属性后，后续的父组件可以填充自己的内容，如下面的代码
div id=应用程序
CCSDS主网（CCSDS Principle Net的缩写）
模板v型槽：标题
p页眉/p
/模板
模板v形槽：页脚
p页脚/p
/模板
/cpn
/div
使用cpn组件，然后指定槽名属性为header和footer的内容。指定后，自己填写的内容将替换默认内容。
注意：这里的语法格式是固定的，v-slot:插槽的名称必须绑定在使用模板标签上。
6、编译作用域
将来使用插槽时，不能使用从外部传递给组件的变量。
div id=应用程序
v-show=isShow/cpn
/div
模板id=cpn
phello/p
/模板
脚本src=./js/vue.js/script
脚本
const app=new Vue({
埃尔： #app ，
数据：{
isShow:没错
},
组件：{
cpn :
模板：`#cpn `，
data(){
返回{
isShow: false
}
}
}
}
})
/脚本
上面我们已经定义了子组件cpn，它的属性是isShow，属性isShow也是在app实例中定义的。最后，当使用子组件cpn时，使用v-show，当值为true时显示。false值不会显示问题：v-show中的isShow值在实例中是true还是在子组件中是false。答案：为真，因为使用时你在app实例的范围内，isShow会在实例中查找数据，虽然你绑定在cpn子组件中。但是，你只需要把这里的cpn当成一个普通的标签。如果希望isShow的值为false，那么只需要在子组件的模板template中使用p v-show=isShowhello/p。
7、作用域插槽
默认槽中的代码只能使用全局Vue中的属性。如果要使用自定义组件中的属性，需要在定义slot时使用v-bind进行绑定。
div id=应用程序
CCSDS主网（CCSDS Principle Net的缩写）
模板v-slot:default=slot
{{slot.data.firstName}}
/模板
/cpn
/div
模板id=cpn
差异
插槽：数据=用户
{{user.lastname}}
/插槽
/div
/模板
脚本src=./js/vue.js/script
脚本
const app=new Vue({
埃尔： #app ，
组件：{
cpn :
模板：`#cpn `，
data(){
返回{
用户:{
名字: A ，
姓氏:壳虫
}
}
}
}
}
})
/脚本
上述代码做了如下几件事情：
1.定义了子组件cpn，其中定义了用户。
2.属性数据被绑定在子组件cpn的模板的槽中，槽的缺省值是user.lastname
3.html中使用子组件，slot Prop对象通过v-slot绑定，这样就可以通过子组件中绑定的对象名和属性名(slot.data)来访问子组件中的数据。
关于Vue槽的使用细节这篇文章就讲到这里。关于Vue slot使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。