vue插槽slot怎么用-创新互联
这篇文章给大家分享的是有关vue插槽slot怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联建站是专业的石楼网站建设公司，石楼接单;提供
成都网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行石楼网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
前言
Vue的slot插槽，可以从字面意思来了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。
一、个人理解及插槽的使用场景
刚开始看教程我的疑惑是为什么要用插槽，它的使用场景是什么，很多解释都是“父组件向子组件传递dom时会用到插槽”，这并不能很好的解决我的疑惑。既然你用了子组件，你为什么要给她传一些dom，直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化，如果去重写子组件是很不明智的一件事，当然也可以将不同之处都写在子组件里，然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展，通过slot插槽向组件内部指定位置传递内容，即将元素作为承载分发内容的出口；
二、用于理解的例子
目前还没接触到使用插槽解决实际问题很好的例子，只能这样去为了理解插槽而用，可能并没有很好的利用到插槽的好处。
在父组件定义想要传入子组件作为插槽的内容，App.vue
添加
{{item}}
在子组件利用元素作为承载分发内容的出口，父组件的插槽内容将在其中显示，todolist.vue
{{message}}
.item {
color: red;
}
li{
list-style: none;
}
三、具体知识点
1、具名插槽
上面的例子只使用了一个slot插槽，但有时我们在一个组件里可能会多处使用插槽，我们希望在不同的插槽处插入不同的内容，此时便需要进行区分， 元素有一个特殊的特性：name。这个特性可以用来定义插槽的名字，在向具名插槽提供内容的时候，我们可以在一个 元素上使用
v-slot 指令，并以 v-slot 的参数的形式写出插槽的名称，使其一一对应。
//一个不带 name 的 出口会带有隐含的名字“default”。
2、作用域插槽
为了使父组件的插槽内容可以使用子组件的数据，可以在 元素上绑定想要传递的数据，此特性被称为插槽 prop。同时在父级作用域中，给 v-slot 带一个值来定义我们提供的插槽 prop 的名字，便可获取到。但此内容只在 作用域内可用。
四、自 2.6.0 起有所更新的语法变化
1、带有slot特性的具名插槽
2、带有slot-scope特性的作用域插槽
五、突发奇想的调换
因为看到一个别人写的关于slot的帖子，他应该是写错了插槽在子父组件的内容，这也就相当于从子组件传一个插槽内容给父组件。仔细想想这思路有问题，既然都引用了子组件，父组件便可以访问到子组件的所有内容，现在却非要通过插槽来传递，多此一举。
然后我就试了一下将插槽内容卸载子组件里，果然出现了报错，如下：
- can only appear at the root level inside the receiving the component（slot的只能出现在接受组件的根级别）
也就是只能在父组件使用。
感谢各位的阅读！关于“vue插槽slot怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻名称：vue插槽slot怎么用-创新互联
分享链接：
http://cdkjz.cn/article/ccoshe.html
