当前位置: 首页 > Web前端 > vue.js

v-soltslots(基本使用,namedslots,scopedslots等)

时间:2023-03-31 22:05:35 vue.js

基本使用组件通过slots预留位置。使用组件时,可以传递具体的内容来替换插槽所占的地方。那就是插槽。比如现在定义了一个组件:componentoccupied位置的具体内容不确定,需要用到的时候传入。我们可以这样使用:传递给槽的内容(可以是文本、标签或组件等)最后的结果可以理解为:给槽一个默认值有时候,我们可能希望槽有自己的默认值,当没有数据传递给组件时,使用默认数据。实现这个功能很简单,直接在slot中添加默认值即可,例如:使用时可以传也可以不传数据:这是传的数据final的result可以理解为:我们看到,第一个选择默认数据,第二个使用传入的数据。提醒:父模板中的所有内容都在父作用域中编译,子模板中的所有内容都在子作用域中编译。有时,命名插槽可能有多个插槽。为了对应,传递时可以给slot命名并匹配:我们定义了三个槽,其中两个叫做index1和index2,第三个没有定义名字,默认名字是default,所以我们在使用的时候需要这样使用:place1place2defaultplaceus模板模板和slot匹配通过v-slot:name,所以运行后的结果是:需要注意的是,v-slot只能添加在最终结果为: