网站建设成本报表,岑溪网站建设,山西建设局网站,今晚比赛预测比分今天学习了Vue的插槽#xff0c;在这之前学习使用组件的使用还没有试过在父组件中给子组件插入html结构#xff0c;今天学习的插槽正是拿来实现这一功能的#xff0c;这也是一种组件中通信的方式#xff0c;首先插槽分为三类#xff1a;默认插槽、具名插槽、作用域插槽。接…今天学习了Vue的插槽在这之前学习使用组件的使用还没有试过在父组件中给子组件插入html结构今天学习的插槽正是拿来实现这一功能的这也是一种组件中通信的方式首先插槽分为三类默认插槽、具名插槽、作用域插槽。接下来分别看一下它们的使用方法。
默认插槽
//父组件中
Categorydivhtml结构1/div
/Category
//子组件中
templatediv!--定义插槽--slot插槽默认内容.../slot/div
/template
父组件div标签中的html都将会被放到子组件的slot标签中slot标签是不会出现在真实DOM上的slot标签内还可以设置默认值当没有接收到父组件传来的html结构时默认值就会插入。
具名插槽
//父组件中:
Categorytemplate slotcenterdivhtml结构1/div/templatetemplate v-slot:footer //新语法divhtml结构2/div/template
/Category
//子组件中:
templatediv!--定义插槽--slot namecenter插槽默认内容.../slotslot namefooter插槽默认内容.../slot/div
/template
默认插槽只能使用一个而具名插槽可以使用多个多个则需要通过给插槽命名来准确插入。先在子组件中定义插槽时并通过name属性给该插槽起名在父组件使用的template标签该标签不会被渲染到真实DOM上通过slot或v-slot:新语法语法来确定插入相当于的插槽内。
作用域插槽
//父组件中
Categorytemplate scopescopeData //scope的值可以自定义!--生成的是ul列表--ulli v-forg in scopeData.games :keyg{{g}}/li/ul/template
/CategoryCategorytemplate slot-scopescopeData //新语法!--生成的是h4标题--h4 v-for:g in scopeData.games :keyg{{g}}/h4/template
/Category
//子组件中
templatedivslot :gamesgames/slot //父组件可以通过该名拿到子组件的数据等号前面的值可以自定义/div
/templatescriptexport default {name:Category,prope:[title],//数据在子组件自身data() {return {games:[红警穿越火线,劲舞团,超级玛丽]}}}
/script
作用域插槽适用于需要的数据在子组件上的时候可以理解为数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。使用方法首先在子组件插槽slot标签中绑定一个向外可以访问的自定义名字比如代码中的games父组件只需在template标签中配置scope或slot-scope新语法值是自定义的但要访问到子组件里面的数据就需要在值的后面通过.子组件自定义的名字来获得。
