亚博电竞手机版-亚博vip888
开发技术 正文
vue中的插槽怎么使用
这篇“vue中的插槽怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中的插槽怎么使用”文章吧。
默认插槽
首先做一个页面：
新增 category.vue
{{title}}分类
.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}
app.vue 中使用
现在修改需求，每个分类都要展示不同的内容：
这里就用到了插槽，修改 category.vue
{{title}}分类
.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}
修改 app.vue
具名插槽
修改 category.vue
{{title}}分类
这是一些默认值，没有内容时展示这是一些默认值，没有内容时展示.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}
修改 app.vue
更多美食{{g}}单机游戏网络游戏经典热门推荐
作用域插槽
如果数据在 category 中，但需要展示不同的形式，我们可以通过插槽传值，类似于我们从父组件向子组件传值：
{{title}}分类
.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}
app 中在子组件中使用 包裹要展示的内容，标签中可以使用scope接收传过来的值{{receivevalue.msg}}
{{g}}
{{msg}}{{g}}