在Vue3中如何使用正确使用插槽

        我在最近的学习中使用到了slot插槽,因为之前一直使用Vue2创建的项目,所以在使用具名插槽的时候没有出现问题。但是在Vue3中使用slot遇到了问题,原本具名插槽不起效果了

        Vue3废弃了原本的slot,官方推荐使用v-slot在Vue3中如何使用正确使用插槽_第1张图片

 在Vue3中如何使用正确使用插槽_第2张图片

 需要注意的是,v-slot只能在中使用,最重要的是需要一个子组件的包裹下才可以使用,具体代码如下在Vue3中如何使用正确使用插槽_第3张图片

在Vue3中如何使用正确使用插槽_第4张图片

我在子组件NavBar.vue中定义了三个具名插槽,在父组件Home.vue中需要在子组件的包裹中使用具名插槽(‘#’是v-slot语法糖写法)

css代码的时候注意是在里面写而不是,以上就是我在学习过程中遇到的问题并解决的过程 

你可能感兴趣的:(vue.js,html5,前端,html,webpack)