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

vue组件槽

时间:2023-03-31 14:20:24 vue.js

组件槽单槽如果我们想让组件标签像HTML标签一样设置内容,那么组件的使用会非常灵活。

Examplecontent

Strengthcontent2
但是一般我们写组件,内容写在first和last标签的组件将被放弃。(上文“实力内容2”)我们需要通过来设置slot。Vue.component('com-a',{template:`

示例内容

//slot
`})在自定义组件中添加内容,替换slot标签,普通文本和标签可以设置成功示例内容组件主体
注意:模板内容的渲染位置当前结构模板属于父组件的视图,所以内容、代码、数据都由父组件渲染。slot是父组件为子组件设置的,data是父组件的数据(当然也可以使用子组件数据,后面通过scopeslot)父组件模板的所有内容为在父作用域编译执行,子组件模板内容在子组件作用域编译执行这里只能访问父组件的数据{{parValue}}
newVue({data:{parValue:'父组件数据'},components:{ComA}})varComA={template:`

组件A:{{value}}

`,data(){return{value:'subcomponent数据的作用}}}slot是组件可以方便的设置当前子组件的内容,该内容由父组件设置。如果父组件没有传入数据,我们可以在中为slot设置默认值,也称为fallbackcontent。varComA={template:`

ComponentA:

Thisisthedefaulttext//默认值
`,data(){return{value:'子组件数据'}}}//槽没有接收到值,显示默认值
如果有多个命名槽在组件中的每个位置都需要设置一个slot,并根据需要为设置一个名称,称为namedslot。在子组件结构中设置多个槽Vue.component('ComA',{template:`
//named
`})父组件使用槽,传入的数据模板为占位符,不显示标签v-slot只能在模板中设置未命名的槽,默认为default,默认槽可以简写,所有没有被v-slot指定的槽内容都认为是默认槽内容可以命名简写为#header#footernamedslot只能赋值name对应的内容,不能显示默认内容。一般内容较多的槽部分设置为默认形式//设置

组件头内容

//默认

组件主体内容

组件底部内容

短格式

组件头部内容

组件主体内容

组件底部内容

Scopeslot可以设置从父组件到子组件方便内容的slot,但是由于组件渲染规则,组件slot内部只能使用父组件的数据,因为这个结构体是由父组件渲染的如果要使用父组件插槽内部的子组件数据,则需要使用作用域插槽来设置作用域插槽:用于允许插槽使用子组件的数据组件将需要通过v-bind绑定到来使用slot使用的数据,这个用来给slot传递数据的属性叫做slotprop。子组件插槽绑定//子组件选项对象varComA={template:`

ComponentA:

Thisisthedefaulttext
`,data(){return{value:"childcomponentdata"}}}父组件接收数据子组件绑定数据后,父组件的slot需要通过v-slot接收数据。接收的是一个包含所有slotprops的对象(子组件可以绑定传递多个属性,都在这个对象中),对象可以任意命名{{dataObj.value}}如果只有一个defaultslot,需要同时接收数据,可以shortened(special){{dataObj.value}}再次缩写,注意:前面的v-slot操作可以简写为#。但是v-slot:default="data"可以写成#=data不能存在于槽名中,可以用#简化,目前的情况只是接收数据,没有#default和name函数v-slot可以是{{dataObj.value}}{{dataObj.value}}也可以通过ES6的解构操作接收数据。{{value}}