Vue中的Ajax②(slot插槽)

Vue中的Ajax②(slot插槽)

文章目录

​​案例引入​​​​默认插槽​​​​具名插槽​​​​作用域插槽​​​​总结​​

案例引入

我们现在有一个需求：

代码：

App组件：

Category组件

现在我们有一个新需求：

这该如何去实现呢？如果我们使用条件渲染，那当需求多了之后，代码逻辑就会变得非常的混乱。

这个时候我们可以使用 – ​​默认插槽​​

默认插槽

使用默认插槽有两个步骤：

在组件标签中放入相应的资源在组件中使用slot标签为资源占位置，使资源在此处呈现

实现以上的需求我们的代码如下：

App组件：

注意：

在上面的代码中：

你的img、ul、video标签都是在App组件里面解析完成之后才放到Category组件里面去的，所以说如果我们想控制img、ul、video的样式，我们完全可以把他们写在App组件中

具名插槽

默认插槽显然不能满足我们的所有需求，就比方说我们如果设置多个插槽，那该怎么呢？我们的结构该往哪个地方放？这个时候我们就需要用到 – ​​具名插槽​​

例如我们现在有一个需求：

我们想新加入一个插槽，把我们蓝色方框之中的东西放进去。

当然我们使用一个插槽也可以完成，但这里我们要体现具名插槽的功能

具名插槽使用方法：

给slot标签添加name属性想把结构放在哪个插槽，就往结构上添加slot属性，其值为插槽名

接下来我们使用代码实现：

App组件：

如果你觉得一个个的元素去添加slot属性很麻烦，我们有两种解决办法：

使用div包裹，然后直接在div身上加slot属性即可使用template包裹，然后直接在template身上加slot属性即可

使用第二个方法更好，因为template标签不会影响最终的结构。

给template添加slot属性有两种方法：

老方法：​​slot="插槽名"​​新方法:​​v-slot:插槽名​​

作用域插槽

首先我们来说一说他的使用场景：

数据在插槽定义的组件里，使用此数据生成的结构是由插槽的使用者决定的

接下来我们还是用过一个案例来体会：

代码如下：

App组件：

Category组件：

我们可以总结一下步骤：

首先在slot标签中使用​​:games="games"​​把数据传出去。注意传给的是插槽的使用者！使用的时候先使用​​slot-scope​​定义一个对象，传过来的数据会成为这个对象的一个属性，而属性名就是games

注意：

总结

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽使用方式：

默认插槽：

父组件中：

具名插槽：

父组件中： 子组件中：

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）具体编码：

父组件中： 子组件中：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。