vue 插槽,vue插槽详解
Vue中的槽在组件开发的过程中其实是非常重要和好用的。下面这篇文章主要介绍vue命名槽基本使用的相关信息，有需要的朋友可以参考一下。
前言
名为的插槽使用了正在使用的“name”属性绑定元素。
注意：
1，如果没有匹配，就放在匿名槽里。
2.命名槽的呈现顺序完全取决于模板，而不是父组件中元素的顺序。
vue的匿名插槽（默认插槽）
父组件
差异
我的地盘，只是/我的地盘
/div
组件
差异
插槽插槽
/div
vue的具名插槽
父组件
差异
我的空间
模板#一头猪是一只大肥猫/模板
模板二是一个大混蛋/模板
模板三咪咪是个没心没肺的小混蛋/模板
我只是
/myslot
/div
组件
差异
slot name=one/slot
插槽插槽
插槽名称=two/slot
插槽名称=三/插槽
/div
渲染(大致按顺序)是
vue的作用域插槽
解释作用域slot白话：父组件可以通过slot读取子组件对应slot承载的数据。
父组件
差异
我的空间
模板#oneData=oneData
div{{oneData.one.message}}/div
/模板
模板二是一个大混蛋/模板
模板三咪咪是个没心没肺的小混蛋/模板
我只是
/myslot
/div
组件
差异
插槽名称=一:数据=一/插槽
插槽插槽
插槽名称=two/slot
插槽名称=三/插槽
/div
脚本
导出默认值{
data() {
返回{
一：{
消息：“这是子组件携带的数据消息”，
},
};
},
}
/脚本
代码优化
差异
我的空间
模板# one data=“{ one data }”
div{{oneData.message}}/div
/模板
模板二是一个大混蛋/模板
模板三咪咪是个没心没肺的小混蛋/模板
我只是
/myslot
/div
组件
差异
slot name= one :oneData= one /slot
插槽插槽
插槽名称=two/slot
插槽名称=三/插槽
/div
脚本
导出默认值{
data() {
返回{
一：{
消息：“这是子组件携带的数据消息”，
},
};
},
}
/脚本
总结
这就是这篇关于vue命名槽的基本用法的文章。有关vue命名插槽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。