vue 插槽(slot)的使用方法
vue的slot主要分三种:默认插槽,具名插槽,作用域插槽
使用插槽是在存在父子关系的组件,可以在子组件中决定插槽的位置,同时子组件也可以给这些插槽的默认信息,当父组件中没有需要给子组件插槽插入信息时,显示的是子组件插槽定义的默认信息。
默认插槽的使用:
// 默认插槽// 子组件定义一个默认插槽 普通插槽
默认的信息
默认插槽的信息2
// 父组件引入并使用这个插槽
我是要显示的插槽信息
具名插槽的使用:vue 2.6.0 版本使用具名插槽和作用域插槽有了新的统一语法,使用v-slot替换了之前的slot和slot-scope
具名插槽就是在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将内容根据name来填充对应的内容。
// 具名插槽
// 子组件中定义
具名插槽
// 父组件引入并使用这个插槽
我是要给two 插槽的信息
作用域插槽的使用:
上边默认插槽和具名插槽基本都是父组件中决定要插入到子组件中的内容,子组件自行决定插槽的位置。具名插槽,就是实现在子组件中自行决定自己要显示什么内容。
// 作用域插槽
// 子组件定义
作用域插槽
默认信息
// 父组件中使用 // 如果子组件中只有一个作用域插槽时,父组件可以使用下边这种简单的写法,规范还是要加上template模板标签
{{slotProps.obj.msg}}---{{slotProps.obj.message}}
当子组件中有多个作用域插槽时:
// 子组件定义
作用域插槽1
默认信息
作用域插槽2
// 父组件使用
{{slotProps.obj.msg}}---{{slotProps.obj.message}}
v-slot:other="slotProps">
{{slotProps.obj2.msg}}---{{slotProps.obj2.message}}