vue学习(5)vue高阶slot插槽使用

1、v-slot,slot-scope和slot

vue2.6更新后推出v-slot 来代替之前 的 slot-scope和slot使用

子组件:child.vue


父组件:

老版使用方式:slot-scope和slot 的具名插槽作用域

新版使用方式:v-slot的具名插槽作用域

其实大家都会发现,子组件其实是没有变化的,区别在于父组件修改了写法,v-slot集成了 slot和slot-scope,简化了写法,另外 v-slot 还可以动态具名

2、v-slot  动态具名


3、v-slot 具名新写法 '#'

4、爷孙插槽组件调用(高阶用法)

孙组件 grandSon.vue


子组件 son.vue

爷组件 grandFather.vue

你可能感兴趣的:(vue学习,vue.js,前端,javascript)