当前位置: 首页 > 网络应用技术

在VUE中使用插槽插槽,这也可以在父母和儿子组件之间实现沟通!

时间:2023-03-09 14:08:10 网络应用技术

  可以说该插槽是VUE的重要组成部分。在研究和练习的过程中,当组件与插槽一起使用时,它会更好。通常更方便。

  今天,我将在VUE中介绍三个插槽:默认插槽,名称插槽和域插槽。

  让我们看一下每个人的初始环境。然后逐步完成此插槽。

  只需编写类别组件并分别渲染这三个数据即可。

  类别组件

  应用程序组件

  一开始,需求如上图所示,但是现在业务需求已经改变。这部电影只是宣传之一。其他人没有传播,食物已经成为一种拉动。

  如下所示:

  我们如何更改它?

  您是在组件中一个一个人判断吗?还是有更好的方法?

  不可能一个人判断,因此代码将变得非常复杂,并且不容易阅读。如果改变业务需求,代码不好。

  然后转到默认插槽。

  我们不需要在子组件中接收数据,也不需要渲染,而是定义插槽。

  应用程序组件也进行更改

  显示效果:

  解释:

  我们在子组件中编写了一个标签,这等同于占据位置。

  在我们父亲的组件中,我们不再像以前那样写自闭症和标签,而是写非自动和标签。在这种方式上,Vue将默认情况下呈现在组件标签中的内容,然后将其放在位置在返回组件中占据位置。

  :CSS样式写在父组件或子组件中,因为它被放在呈现后的返回组件中。在子组件中写入,在放置子组件时会呈现。

  在这里写信后,客户突然感到您是如此强大且不满意,并开始给您飞蛾。

  接下来,我去了名称插槽。

  我们可以考虑使用插槽,那么为什么我们不能尝试使用两个插槽尝试一下?

  重建子类

  父组件

  显示结果

  解释:

  我们可以在组件中放置多个插槽,但是我们必须在多次时命名它们,并且必须指定父组件,以便我们无法放入。

  示波器插槽与正面略有不同。数据以前是在父组件中,域插槽是子组件中的数据,该数据依次传输到父组件,而父组件将结构定义为呈现。

  重建的子组件

  父组件

  渲染

  在研究和实践的过程中,我没有想到什么使用方案,但是官方网站上有一些情况。我认为它必须有一个存在的理由,但是我的知识太少,没有使用它。

  解释:

  在子组件中,将其传输到父组件。

  让我们一起做!交点截形,如果文章中有任何不利条件,请及时指出,并郑重地感谢您。

  大家好,我是博客

  一个喜欢文学和艺术但踏上编程之路的年轻人。

  希望:。