vue插槽的使用

1、默认插槽的使用

假设有app.vue和test.vue组件

在app.vue中

在test组件里面加入图片


    

我是组件里面的数据

在test.vue组件中

如果没有使用插槽的表现为

vue插槽的使用_第1张图片

表明没有解析test组件中的

我是组件里面的数据

 

这个语句,因为vue不知道这条语句放在一下的哪个地方

 

 

所以vue没有解析

解决方案

我是组件里面的数据

语句需要展示的位置放一个插槽,表示将这条语句展示在固定位置,效果如下图所示:

vue插槽的使用_第2张图片

 假如在app.vue中,没有在组件内部加入东西

但是在test组件内部却有插槽

效果如下

vue插槽的使用_第3张图片

 2、具名插槽

每个插槽具有名字这一属性,用例如下


在组件当中指定插槽的使用

等到的结果如下图所示

vue插槽的使用_第4张图片

 

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