vue组件槽
组件槽单槽如果我们想让组件标签像HTML标签一样设置内容,那么组件的使用会非常灵活。Examplecontent
Strengthcontent2
但是一般我们写组件,内容写在first和last标签的组件将被放弃。(上文“实力内容2”)我们需要通过
来设置slot。Vue.component('com-a',{template:``})在自定义组件中添加内容,替换slot标签,普通文本和标签可以设置成功示例内容组件主体 注意:模板内容的渲染位置当前结构模板属于父组件的视图,所以内容、代码、数据都由父组件渲染。slot是父组件为子组件设置的,data是父组件的数据(当然也可以使用子组件数据,后面通过scopeslot)父组件模板的所有内容为在父作用域编译执行,子组件模板内容在子组件作用域编译执行
这里只能访问父组件的数据{{parValue}} newVue({data:{parValue:'父组件数据'},components:{ComA}})varComA={template:`
`,data(){return{value:'subcomponent数据的作用}}}slot是组件可以方便的设置当前子组件的内容,该内容由父组件设置。如果父组件没有传入数据,我们可以在
中为slot设置默认值,也称为fallbackcontent。varComA={template:`ComponentA:
Thisisthedefaulttext//默认值
`,data(){return{value:'子组件数据'}}}//槽没有接收到值,显示默认值 如果有多个命名槽在组件中的每个位置都需要设置一个slot,并根据需要为